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 デバイスを電源につないでも、デバイスが検出されないをご覧ください。
Android デバイスに [USB デバッグを許可] プロンプトが表示されない場合は、次の手順をお試しください。
- DevTools が開発マシン上でフォーカスされ、Android のホーム画面が表示されている状態で、USB ケーブルをいったん取り外してから再接続する。つまり、Android または開発マシンの画面がロックされていると、プロンプトが表示されないことがあります。
- Android デバイスと開発マシンの表示設定を更新して、スリープ状態にならないようにします。
- Android の USB モードを PTP に設定する。Galaxy S4 で [USB デバッグの承認] ダイアログ ボックスが表示されないをご覧ください。
- Android デバイスの [開発者向けオプション] 画面で [USB デバッグの許可を取り消す] を選択し、新しい状態にリセットします。
このセクションや Chrome DevTools デバイスで電源接続時にデバイスが検出されないに記載されていない解決策を見つけた場合は、Stack Overflow の質問に対する回答を追加するか、developer.chrome.com リポジトリで問題を報告するようにしてください。
ステップ 2: 開発マシンから Android デバイスのコンテンツをデバッグする
- Android デバイスで Chrome を開きます。
開発マシンの
chrome://inspect/#devices
に、Android デバイスのモデル名に続いてシリアル番号が表示されます。その下には、デバイスに搭載されている Chrome のバージョンが、かっこ内にバージョン番号とともに表示されます。[URL のあるタブを開く] テキスト ボックスに URL を入力し、[開く] をクリックします。Android デバイスの新しいタブでページが開きます。
chrome://inspect/#devices
に、リモートの Chrome タブごとに専用のセクションが表示されます。このセクションからそのタブを操作することができます。WebView を使用しているアプリがある場合は、それぞれのアプリのセクションも表示されます。この例では、開いているタブは 1 つだけです。開いた URL の横にある [検証] をクリックします。新しい DevTools インスタンスが開きます。
Android デバイスで実行されている Chrome のバージョンによって、開発マシンで開く DevTools のバージョンが決まります。そのため、Android デバイスで非常に古いバージョンの Chrome が搭載されている場合は、DevTools インスタンスの表示が以前とは大きく異なることがあります。
その他の操作: タブを一時停止する、フォーカスする、再読み込みする、閉じる
URL の下には、タブを一時停止、フォーカス、再読み込み、閉じるためのメニューがあります。
要素を検査する
DevTools インスタンスの [Elements] パネルに移動し、要素にカーソルを合わせて、Android デバイスのビューポートでハイライト表示します。
Android デバイスの画面で要素をタップして、[要素] パネルで選択することもできます。 DevTools インスタンスで [要素を選択] をクリックし、Android デバイスの画面で要素をタップします。なお、[要素を選択] は最初のタップで無効になるため、この機能を使用するには毎回有効にする必要があります。
Android の画面を開発マシンにスクリーンキャストする
スクリーンキャストを切り替えるアイコン をクリックして、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 connection を使用することもできます。
開発マシンのコマンドラインで
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
ターゲット エンドポイントを公開します。 - [Discover USB devices] の設定がオンになっていなくても、
chrome://inspect/#devices
が入力されます。
トラブルシューティングについては、以下をご覧ください。
adb
ドキュメント必要に応じて、以下の古いガイドを読むこともできます。