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

Kayce Basques

Twitter GitHub Glitch

Sofia Emelianova

GitHub

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

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

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

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

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

5. [USB デバイスの検出] が有効になっていることを確認します。

   

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 デバイスでデバイスが検出されないをご覧ください。

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

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

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

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

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

要素を調べる

DevTools インスタンスの [要素] パネルに移動し、要素にカーソルを合わせて 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）を使用します。

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

3. 次のコマンドを使用して Android デバイスを開発マシンに接続します。

   • USB ケーブル（直立）。
   • または、adb Wi-Fi connection を実行します。

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

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

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. 接続に成功すると、次のように表示されます。

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

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

• adb ドキュメント

• 必要に応じて、以前のガイドを読むこともできます。

  • remote-debugging-legacy
  • リモート デバッグ
  • girish.in/...どうやって