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 が開発マシン上でフォーカスされ、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 のバージョンが、かっこ内にバージョン番号とともに表示されます。

    デバイスで実行されている 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 デバイスの画面で要素をタップして、[要素] パネルで選択することもできます。 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 ターゲット エンドポイントを公開します。
    • [Discover USB devices] の設定がオンになっていなくても、chrome://inspect/#devices が入力されます。

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