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

Kayce Basques

Sofia Emelianova

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

• リモート デバッグ用に Android デバイスをセットアップし、開発マシンから検出します。
• 開発マシンから Android デバイスのライブ コンテンツを検査してデバッグします。
• Android デバイスのコンテンツを開発マシンの DevTools インスタンスにスクリーンキャストします。

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

以下のワークフローは、ほとんどのユーザーに有効です。詳しくは、トラブルシューティング: DevTools が Android デバイスを検出しないをご覧ください。

1. Android で [開発者向けオプション] 画面を開きます。デバイスの開発者向けオプションを設定するをご覧ください。
2. [USB デバッグを有効にする] を選択します。
3. 開発マシンで Chrome を開きます。
4. chrome://inspect#devicesに向かいます。

5. [Discover USB devices] が有効になっていることを確認します。

   

6. USB ケーブルを使用して、Android デバイスを開発マシンに直接接続します。

7. デバイスを初めて接続する場合は、デバイスが「オフライン」と表示され、認証が保留中になります。

   

   この場合は、デバイスの画面に表示されるデバッグ セッションのプロンプトを承認します。

8. Android デバイスのモデル名が表示されたら、DevTools はデバイスへの接続を正常に確立しています。

   

9. ステップ 2 に進みます。

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

ハードウェアが正しくセットアップされていることを確認します。

• USB ハブを使用している場合は、Android デバイスを開発マシンに直接接続してみてください。
• Android デバイスと開発マシンの間の USB ケーブルを抜き、もう一度差し込んでみてください。Android と開発マシンの画面のロックを解除した状態で行います。
• USB ケーブルが正常に動作することを確認します。開発マシンから Android デバイス上のファイルを検査できるようになります。

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

• 開発マシンで Windows を実行している場合は、Android デバイスの USB ドライバを手動でインストールしてみてください。OEM USB ドライバのインストールをご覧ください。
• Windows デバイスと Android デバイスの組み合わせ（特に Samsung）によっては、追加の設定が必要になる場合があります。Chrome DevTools Devices does not detect device when plugged in をご覧ください。

Android デバイスに [USB デバッグを許可しますか？] というメッセージが表示されない場合は、次のことを試してください。

• 開発マシンで DevTools がフォーカスされ、Android のホーム画面が表示されている状態で、USB ケーブルを接続解除してから再接続します。つまり、Android または開発マシンの画面がロックされていると、プロンプトが表示されないことがあります。
• Android デバイスと開発マシンのディスプレイ設定を更新して、スリープ状態にならないようにします。
• Android の USB モードを PTP に設定します。Galaxy S4 で [USB デバッグを許可] ダイアログ ボックスが表示されないを参照してください。
• Android デバイスの [開発者向けオプション] 画面で [USB デバッグの許可を取り消す] を選択して、初期状態にリセットします。

このセクションまたは Chrome DevTools でデバイスを接続しても検出されないに記載されていないソリューションを見つけた場合は、その Stack Overflow の質問に回答を追加するか、developer.chrome.com リポジトリで問題を報告してください。

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

1. Android デバイスで Chrome を開きます。

2. 開発マシンの chrome://inspect/#devices に、Android デバイスのモデル名とシリアル番号が表示されます。その下には、デバイスで実行されている Chrome のバージョンが、バージョン番号とともに括弧で囲まれて表示されます。

   

3. [Open tab with url] テキスト ボックスに URL を入力し、[Open] をクリックします。Android デバイスで新しいタブが開きます。

   

   リモートの Chrome タブごとに、chrome://inspect/#devices に独自のセクションが表示されます。このセクションからそのタブを操作できます。WebView を使用しているアプリがある場合は、それらのアプリのセクションも表示されます。この例では、タブが 1 つだけ開いています。

4. 先ほど開いた URL の横にある [検査] をクリックします。新しい DevTools インスタンスが開きます。

Android デバイスで実行されている Chrome のバージョンによって、開発マシンで開く DevTools のバージョンが決まります。そのため、Android デバイスで非常に古いバージョンの Chrome を実行している場合、DevTools インスタンスの見た目が普段見慣れているものと大きく異なることがあります。

その他の操作: タブの一時停止、フォーカス、再読み込み、閉じる

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

要素を検証する

DevTools インスタンスの [要素] パネルに移動し、要素にカーソルを合わせると、Android デバイスのビューポートで要素がハイライト表示されます。

Android デバイスの画面上の要素をタップして、[要素] パネルで選択することもできます。DevTools インスタンスで [要素を選択] をクリックし、Android デバイスの画面で要素をタップします。要素を選択は最初のタップ後に無効になるため、この機能を使用するたびに再度有効にする必要があります。

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）を使用します。

1. Android デバイスで開発者向けオプションと USB デバッグを有効にしてください。
2. Android デバイスで Chrome を開きます。

3. Android デバイスを開発マシンに接続します。

   • USB ケーブル（簡単）。
   • または、adb Wi-Fi 接続。

4. 開発マシンのコマンドラインで adb devices -l を実行し、デバイスがリストに表示されているかどうかを確認します。

5. デバイスの CDP ソケットを、マシンのローカルポート（9222 など）に転送します。これを行うには、次のコマンドを実行します。

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. 正常に接続されたら、次のことを確認します。

   • http://localhost:9222/json には page ターゲットが一覧表示されます。
   • http://localhost:9222/json/version は、CDP ドキュメントで示されているように、browser ターゲット エンドポイントを公開します。
   • [USB デバイスを検出する] 設定がオンになっていなくても、chrome://inspect/#devices が入力されます。

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

• adb ドキュメント

• 必要に応じて、以前のガイドをご覧ください。

  • remote-debugging-legacy
  • remote-debugging
  • girish.in/…how