このページは Cloud Translation API によって翻訳されました。

Android デバイスのリモートデバッグ

Kayce Basques

Sofia Emelianova

Windows、Mac、または Linux コンピュータから Android 端末上のライブコンテンツのリモートデバッグを行います。このチュートリアルでは、次の方法について説明します。

Android 端末をリモートデバッグ用に設定し、開発マシンから検出します。
開発マシンから Android 端末上のライブコンテンツを調査し、デバッグします。
Android 端末のコンテンツを開発マシン上の DevTools インスタンスにスクリーンキャストします。

リモートデバッグ図

ステップ 1: Android デバイスを検出する

以下のワークフローは、ほとんどのユーザーが使用できます。詳しくは、トラブルシューティング: DevTools が Android 端末を検出しないをご覧ください。

Android で [開発者向けオプション] 画面を開きます。デバイスの開発者向けオプションを設定するをご覧ください。
[USB デバッグを有効にする] を選択します。
開発マシンで Chrome を開きます。
chrome://inspect#devicesに向かいます。
[USB デバイスを検出] が有効になっていることを確認します。
USB ケーブルを使用して、Android デバイスを開発マシンに直接接続します。
デバイスを初めて接続する場合、デバイスは「オフライン」と表示され、認証待ちになります。

その場合は、デバイスの画面に表示されるデバッグセッションのプロンプトでデバッグを許可します。
Android デバイスのモデル名が表示されたら、DevTools がデバイスへの接続を確立したことを示します。
ステップ 2 に進みます。

トラブルシューティング: DevTools が Android デバイスを検出しない

ハードウェアが正しく設定されていることを確認してください。

USB ハブを使用している場合は、Android 端末を開発マシンに直接接続してみてください。
Android デバイスと開発マシンをつないでいる USB ケーブルをいったん抜いて、再び差し込んでください。この操作は、Android 端末と開発マシンの画面がロックされていない間に行います。
USB ケーブルが機能することを確認します。開発マシンから Android 端末のファイルを調査できるはずです。

ソフトウェアが正しく設定されていることを確認してください。

開発マシンが Windows を実行している場合は、Android デバイス用の USB ドライバを手動でインストールしてみてください。OEM USB ドライバのインストールをご覧ください。
Windows と Android 端末（特に Samsung）を組み合わせる場合は、特別な設定が必要となることがあります。端末を接続しても Chrome DevTools Devices が検出しないをご覧ください。

Android デバイスに [USB デバッグを許可] プロンプトが表示されない場合は、次の操作を行ってください。

開発マシンで DevTools にフォーカスがあり Android のホーム画面が表示されている間に、USB ケーブルをいったん抜いてから再度接続します。Android または開発マシンの画面がロックされていると、プロンプトが表示されない場合があります。
Android デバイスと開発マシンの表示設定を更新し、スリープ状態にならないようにしてください。
Android の USB モードを PTP に設定します。Galaxy S4 に [USB デバッグの承認] ダイアログボックスが表示されないをご覧ください。
Android デバイスの [開発者向けオプション] 画面で [USB デバッグの認可を取り消す] を選択し、新しい状態にリセットします。

このセクションまたは端末を接続しても Chrome DevTools Devices が検出しないに記載されていない解決策が見つかった場合は、その Stack Overflow の質問に回答を追加するか、developer.chrome.com リポジトリで問題を報告してください。

ステップ 2: 開発マシンから Android 端末のコンテンツをデバッグする

Android デバイスで Chrome を開きます。
開発マシンの chrome://inspect/#devices に、Android デバイスのモデル名とそのシリアル番号が表示されます。その下には、端末で実行している Chrome のバージョンが表示され、かっこ内にバージョン番号が示されます。
[Open tab with url] テキストボックスに URL を入力し、[Open] をクリックします。Android デバイスの新しいタブでページが開きます。

各リモート Chrome タブには、chrome://inspect/#devices に独自のセクションが割り当てられます。このセクションからそのタブを操作できます。WebView を使用しているアプリがある場合は、それらの各アプリのセクションも表示されます。この例では、開いているタブは 1 つだけです。
開いた URL の横にある [検査] をクリックします。新しい DevTools インスタンスが開きます。

リモートタブの新しい DevTools インスタンス。

Android デバイスで実行している Chrome のバージョンによって、開発マシン上で起動する DevTools のバージョンが決まります。そのため、Android 端末で非常に古いバージョンの Chrome を使用している場合は、DevTools インスタンスが、使い慣れたものとは異なって見えることがあります。

その他のアクション: タブを一時停止、フォーカス、再読み込み、閉じる

URL の下に、タブを一時停止、フォーカス、再読み込み、閉じるメニューが表示されます。

要素を検査する

DevTools インスタンスの [Elements] パネルに移動し、要素にカーソルを合わせて、Android 端末のビューポートで要素をハイライト表示します。

Android デバイスの画面上で要素をタップして、[要素] パネルでその要素を選択することもできます。DevTools インスタンスで [要素の選択] をクリックし、Android デバイスの画面で要素をタップします。1 回タップすると [Select Element] が無効になるため、この機能を使用するたびに再度有効にする必要があることに注意してください。

開発マシンに Android の画面をスクリーンキャストします

[Toggle Screencast] をクリックして、DevTools インスタンスで Android 端末のコンテンツを表示します。

さまざまな方法でスクリーンキャストを操作できます。

クリックはタップに変換され、端末で正しいタッチイベントが発生します。
コンピュータでのキーストロークが端末に送信されます。
ピンチ操作をシミュレートするには、Shift キーを押しながらドラッグします。
スクロールするには、トラックパッドやマウスホイールを使用するか、マウスポインタでフリングします。

スクリーンキャストに関する注意事項:

スクリーンキャストではページのコンテンツのみが表示されます。スクリーンキャストの透明な部分は、Chrome のアドレスバー、Android のステータスバー、Android のキーボードなど、デバイスのインターフェースを表します。
スクリーンキャストはフレームレートに悪影響を及ぼします。スクロールやアニメーションのパフォーマンスを計測するときは、スクリーンキャストを無効にすると、ページのパフォーマンスをより正確に把握できます。
Android デバイスの画面をロックすると、スクリーンキャストのコンテンツが非表示になります。Android デバイスの画面のロックを解除すると、スクリーンキャストが自動的に再開します。

Android Debug Bridge（adb）を使用して手動でデバッグする

まれに、リモートデバッグの別の方法が役立つことがあります。たとえば、Android 版 Chrome の Chrome DevTools Protocol（CDP）に直接接続できます。

これを行うには、Android Debug Bridge（adb）を使用します。

Android デバイスで開発者向けオプションと USB デバッグを有効にしてください。
Android デバイスで Chrome を開きます。
Android デバイスを開発マシンに接続します。
- USB ケーブル（簡単）。
- または、adb Wi-Fi 接続を使用します。
開発マシンのコマンドラインで adb devices -l を実行し、デバイスがリストに含まれているかどうかを確認します。
デバイスの CDP ソケットをマシンのローカルポート（9222 など）に転送します。これを行うには、次のコマンドを実行します。
```
adb forward tcp:9222 localabstract:chrome_devtools_remote
```
正常に接続されたら、次のことを確認します。
- http://localhost:9222/json は、page ターゲットを一覧表示します。
- CDP のドキュメントに記載されているように、http://localhost:9222/json/version は browser ターゲットエンドポイントを公開します。
- [USB デバイスを検出] 設定がオンになっていなくても、chrome://inspect/#devices が入力されます。

トラブルシューティングについては、以下をご覧ください。

adb ドキュメント
必要に応じて、古いガイドもご覧ください。

Android デバイスのリモート デバッグ