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

Kayce Basques
Sofia Emelianova
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 デバイスの検出] が有効になっていることを確認します。

    [USB デバイスの検出] チェックボックスがオンになっている。

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

  7. 初めてデバイスに接続する場合は、デバイスは [オフライン] と表示されます。確認できます。

    オフラインのデバイスが認証待ちです。

    その場合は、デバイスの画面でデバッグ セッション プロンプトを受け入れます。

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

    正常に接続されたデバイス（モデル名で指定されたもの）。

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

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

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

  • USB ハブを使用している場合は、Android デバイスを開発マシンに直接接続してみてください してください。
  • Android デバイスと開発マシンをつなぐ USB ケーブルを外し、その後 接続し直す必要がありますAndroid と開発マシンの画面がロック解除されているときに行います。
  • USB ケーブルが機能していることを確認します。Android デバイスでファイルを検査できるはずです。 実行することもできます。

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

Android デバイスに [USB デバッグを許可] プロンプトが表示されない場合は、次の手順をお試しください。

  • DevTools で開発がフォーカスされている間に、USB ケーブルを取り外してから再接続する Android のホーム画面が表示されています。つまり、プロンプトが表示されず、 Android や開発マシンの画面がロックされているときにも起動できます。
  • Android デバイスと開発マシンの表示設定を更新して、 寝る。
  • Android の USB モードを PTP に設定する。Galaxy S4 で [Authorize USB debug] ダイアログが表示されない チェックボックスをオンにします。
  • Android の [開発者向けオプション] 画面で、[USB デバッグの許可を取り消す] を選択します。 Android デバイスで新しい状態にリセットします。

このセクションまたは Chrome DevTools で「デバイスを使用できない」 検出されたデバイスを検出する、という質問に対して Stack Overflow に回答を追加するか、 developer.chrome.com リポジトリの事象をご覧ください。

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

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

  2. 開発マシンの chrome://inspect/#devices に、Android デバイスのモデル名が表示され、 シリアル番号を確認できます。その下には、デバイスで実行されている Chrome のバージョン、 かっこ内にバージョン番号が含まれています。

    デバイスで実行されている Chrome のバージョン。

  3. [URL のあるタブを開く] テキスト ボックスに URL を入力し、[開く] をクリックします。ページは Android デバイスで新しいタブを開きます。

    セクションにリストされているリモートタブ。

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

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

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

Android デバイスで実行されている Chrome のバージョンによって、開発マシンで開く DevTools のバージョンが決まります。そのため、Android デバイスで非常に古いバージョンの Chrome が搭載されている場合は、DevTools インスタンスの表示が以前とは大きく異なることがあります。

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

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

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

要素を検査する

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

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

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

[スクリーンキャストを切り替える] をクリックします スクリーンキャストを切り替えるして表示します Android デバイスのコンテンツを DevTools インスタンスで管理します。

スクリーンキャストは複数の方法で操作できます。

  • クリックがタップに変換され、デバイスで適切なタッチイベントが発生します。
  • パソコンでのキー入力内容がデバイスに送信されます。
  • ピンチ操作をシミュレートするには、Shift キーを押しながらドラッグします。
  • スクロールするには、トラックパッドまたはマウスホイールを使用するか、マウスポインタをフリングします。

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

  • スクリーンキャストではページのコンテンツのみが表示されます。スクリーンキャストの透明な部分がデバイスを表す インターフェース（Chrome のアドレスバー、Android のステータスバー、Android のキーボードなど）を使用できます。
  • スクリーンキャストはフレームレートに悪影響を及ぼします。スクロールや測定中のスクリーンキャストを無効にする ページのパフォーマンスをより正確に把握できます。
  • Android デバイスの画面をロックすると、スクリーンキャストのコンテンツは表示されなくなります。Google Pixel を スクリーンキャストを自動的に再開する 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 ターゲット エンドポイントを公開します。
    • [Discover USB devices] の設定がオンになっていなくても、chrome://inspect/#devices が入力されます。

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