Web・技術

Android Chrome を PC からデバッグする方法｜Windows・USB接続

約 12 分で読めます

Android スマホの Chrome で開いている Web ページを、PC の Chrome DevTools から確認・デバッグしたいことがあります。

たとえば、

  • スマホ実機でしか起きない表示崩れを確認したい
  • スマホでボタンをタップしたときの JavaScript の動作を確認したい
  • Console にエラーが出ていないか確認したい
  • Network で通信内容を確認したい
  • Android にインストールした PWA を実機で操作しながら確認したい

といった場合です。

Chrome には、USB 接続した Android 端末上の Chrome を、PC 側の Chrome DevTools からリモートデバッグする機能があります。

この記事では、Windows PC と Google Pixel 8 Pro を USB 接続し、Android 側の Chrome を PC からデバッグできるようにするまでを、最初から順番に説明します。

なお、この記事で扱うのは Android 版 Chrome で開いている Web ページなどを Chrome DevTools からデバッグする方法です。Android Studio を使ったネイティブ Android アプリのデバッグ方法ではありません。

Android Chrome を PC からデバッグすると何ができる？

接続が完了すると、Android スマホで実際に Web ページを操作しながら、PC 側で Chrome DevTools を開けます。

通常の Chrome DevTools と同じように、

  • Elements
  • Console
  • Network
  • Sources

などを利用できます。

たとえば、スマホ側でボタンをタップしながら PC 側の Console を確認したり、Elements で実機の表示を確認したりできます。

Chrome DevTools の Screencast を利用すると、Android 側で表示している Web ページを PC 側に表示して操作することもできます。

私の場合は、Pixel 8 Pro にインストールした PWA を実際に操作しながら、PC 側の Chrome DevTools で JavaScript のイベントや Console の内容を確認するために利用しました。

STEP1：Android の「開発者向けオプション」を表示する

Android では、初期状態では「開発者向けオプション」が表示されていません。

まず開発者向けオプションを有効にします。

Pixel 8 Pro の場合だと下記手順です。他の端末の場合は近しい表現のメニューから探してみてください。

  1. 「設定」を開く
  2. 「デバイス情報」を開く
  3. 画面下部付近にある「ビルド番号」を探す
  4. 「ビルド番号」を7回タップする
  5. 求められた場合はPIN・パスコードなどを入力する
  6. 「開発者向けオプションが有効になりました」のメッセージが表示される

ビルド番号の7回タップに関しては、3回目のタップから「あと 〇ステップでデベロッパー設定が有効になります」というメッセージが、タップするごとに表示されます。

STEP2：USB デバッグ を ON にする

開発者向けオプションを有効にしたら、「設定」→「システム」→「開発者向けオプション」（詳細設定内のバックアップの下）を開きます。

その中にある「USB デバッグ」を ON にします。

「USB デバッグを許可しますか？」という確認ダイアログが表示されたら、内容を確認して許可します。

STEP3：Android スマホと Windows PC を USB 接続する

Android スマホと Windows PC を USB ケーブルで接続します。

なお、USB ケーブルといってますが、両端が Type-C のケーブルであっても問題ありません。私は Pixel 8 Pro と Surface Pro を Type-C To Type-C のケーブルでつないでできました。

ケーブルの種類に注意

充電専用のケーブルでは、Android端末とPCのデータ通信ができないため、Chromeのリモートデバッグもできません。

STEP4：PC の Chrome で chrome://inspect/#devices を開く

Windows PC で Chrome を開き、アドレスバーに chrome://inspect/#devices と入力してアクセスします。

「Discover USB devices」にチェックが入っていることを確認し、入っていない場合はチェックしてください。

初めて接続する PC でまだ USB デバッグの認証が完了していない場合は、端末が Offline となり、Pending authentication（認証待ち）と表示されます。

もし、Offline 、Pending authentication が表示されない場合は、PC の Chrome が端末を検出できていない可能性があります。

USB デバッグ、USB ケーブル、USB ポートなどを確認しても改善しない場合は、Windows 側の ADB 用 USB ドライバが正しく適用されているかも確認してください。詳しい切り分け方法は、下記の記事で紹介しています。

Android の USB デバッグで RSA 承認ダイアログが出ないときの対処法

STEP5：スマホ側で パソコンからの USB デバッグを許可する

初回接続では、スマホ側に再度「USB デバッグを許可しますか？」という通知が表示されます。

これは、STEP2 で「USB デバッグ」の設定を ON にしたときの確認とは別です。STEP2 の確認は、スマホ自体に外部からの「USB デバッグ」を許可するか、というものです。

一方、PC と USB 接続した時に表示されるのは「USB 接続した PC からのデバッグを許可するか」というものであり、RSA 承認ダイアログといいます。

必要であれば「このパソコンからの USB デバッグを常に許可する」にチェックを入れ、「許可」をタップします。

認証が完了すると、PC の chrome://inspect/#devices に Android 端末のモデル名などが表示され、デバッグできる状態になります。

RSA 承認ダイアログが表示されない場合

ここまで手順通りに進めて、PC と USB 接続をしても、スマホ側に RSA 承認ダイアログが表示されないケースがあります。

私の Pixel 8 Pro でも、何度やり直しても RSA 承認ダイアログが表示されず非常に困ったのですが、最終的には、Android SDK Platform-Tools を導入してコマンドプロンプトで adb devices を実行することで RSA 承認ダイアログを表示できました。

RSA 承認ダイアログが表示されない場合の対応については、トラブルシューティングとして下記記事にまとめています。

Android の USB デバッグで RSA 承認ダイアログが出ないときの対処法

STEP6：Android 側の Chrome でデバッグしたいページを開く

Android スマホで Chrome を開き、デバッグしたい Web ページを表示します。

その後で PC の chrome://inspect/#devices に戻ると、「Remote Target」欄の Android 端末の下に、スマホ側の Chrome で開いているページのタイトルや URL が表示されます。

表示されない場合は、chrome://inspect/#devices を再読み込みしてみてください。

STEP7：inspect をクリックして Chrome DevTools を開く

デバッグしたいページの横にある inspect をクリックします。

すると、PC 側にその Android 実機用の Chrome DevTools が開きます。

これで、Android スマホで開いている実際の Web ページを、PC 側から確認・デバッグできます。

スマホ側でページをスクロールしたり、ボタンをタップしたりしたときの状態も PC 側で確認できます。

Elements でスマホ実機の表示を確認する

Chrome DevTools の「Elements」では、Android 実機で表示されているページの HTML や CSS を確認できます。

PC のブラウザでスマホ幅を再現するデバイスモードとは異なり、実際の Android 端末で表示されているページを対象に確認できるのがポイントです。

スマホ実機でだけ発生するレイアウト崩れの調査にも利用できます。

Console で JavaScript のエラーや動作を確認する

「Console」では、Android 実機上で発生した JavaScript のエラーや console.log() の内容などを PC 側で確認できます。

スマホ側で実際にボタンをタップし、そのときにどのイベントが発生しているのかを調べる、といった使い方もできます。

PC 上では正常なのに Android 実機だけ動作がおかしい場合の調査にも便利です。

Network でスマホ実機の通信を確認する

「Network」では、Android 実機上のページから発生したネットワーク通信を確認できます。

API リクエストや画像・JavaScript・CSS などの読み込み状況、HTTP ステータスなどを PC 側で確認できます。

実機で特定の通信だけ失敗していないか確認したい場合にも利用できます。

Android にインストールした PWA の確認にも使える

Web サイトを Android に PWA としてインストールしている場合、ブラウザで開いたときとは挙動が異なることがあります。

私の場合は、Pixel 8 Pro にインストールした PWA を実際に操作しながら、PC 側の Chrome DevTools で Console や JavaScript のイベントを確認できました。

ブラウザ版では再現しない不具合や、インストールした PWA での操作時だけ起きる問題を調べたい場合にも、実機デバッグは役立ちます。

まとめ

Android スマホの Chrome を Windows PC からデバッグする基本的な流れは、次のとおりです。

  1. Android の開発者向けオプションを有効にする
  2. USB デバッグを ON にする
  3. データ通信対応の USB ケーブルで Windows PC と接続する
  4. PC の Chrome で chrome://inspect/#devices を開く
  5. Android 側で USB デバッグの RSA 承認を行う
  6. Android 側の Chrome でデバッグしたいページを開く
  7. PC 側で対象ページの inspect をクリックする

接続できれば、Android 実機を操作しながら、PC の Chrome DevTools で Elements、Console、Network、Sources などを利用できます。

PC の Developer Tools によるデバイスモードだけでは確認しにくいスマホ実機固有の問題や、Android にインストールした PWA の動作を確認したい場合にも便利です。

参考

#Android#Chrome DevTools#USB デバッグ#Windows#PWA#初心者向け
← ブログ一覧に戻る