最近スマホのWebアプリをデバッグする必要がありAndroidのChromeをPCから見れるようにしたんですが、めっちゃハマったので備忘録として残しておく。
TL;DR
- USB接続でのデバッグはADBが必要（途中で接続が切れる既知のバグあり）
- ワイヤレスデバッグの方が安定して使える
- ペアリング時のポート番号と通常接続時のポート番号は別なので注意
- USBドライバをインストールしてみた(不要かも)
USB接続でのデバッグ
基本的な設定手順
Android端末をUSB-CケーブルでPCに接続し、以下の手順で設定します。
- Android側で開発者モードを有効化
- 開発者オプションから「USBデバッグ」をオンにする
- USB接続方法を「PTPモード」に変更（通知から設定）
- PCのChromeで
chrome://inspect/#devicesにアクセス
ADBのインストールが必要
ここまでやってもデバイスが表示されるだけで、Pending authentication: please accept debugging session on the device. という表示が出て先に進めませんでした。
本来はこの時点でAndroid側に認証ポップアップが出るはずなんですが何も表示されない…。
調べてみるとAndroid Debug Bridge（ADB）というツールを入れる必要があるらしい。
ADBのダウンロードとインストール
- Android Developer サイト からPlatform Toolsをダウンロード
- ダウンロードしたZIPを解凍
- コマンドラインから以下を実行してデーモンを起動
adb.exe start-server adb.exe devices
さらにこのタイミングで私はUSBドライバをインストールしてました(不要かも)
Google USB ドライバを入手する | Android Studio | Android Developers
これでAndroid側に「USBデバッグを許可しますか？」というポップアップが表示されました！
USB接続の問題点
chrome://inspect からinspectボタンを押すとDevToolsが起動しますが、ここで新たな問題が発生しました。
- 一度リロードすると接続が途切れてDevToolsが更新されなくなる
- 再度inspectボタンを押しても起動しなくなる
- その度に
adb kill-serverしてUSBを差し直す必要がある
調べたところこれは既知のバグらしく、USB接続での開発は実用的ではないと判断しました。
ワイヤレスデバッグ
USB接続が不安定やったので、Wi-Fi経由でのデバッグに切り替えました。こっちの方が圧倒的に安定していておすすめです。
設定手順
- Android端末とPCを同じWi-Fiネットワークに接続
- Android側の開発者オプションから「ワイヤレスデバッグ」をオンにする
- 「ワイヤレスデバッグ」メニュー内のIPアドレスとポート番号を確認
ペアリング（初回のみ）
重要: ペアリング時と通常接続時でポート番号が異なります。
- Android側で「専用コードによるデバイスのペア設定」をタップ
- 表示されたIPアドレスとポート番号（例:
192.168.10.101:45678）を使ってペアリング
adb.exe pair 192.168.10.101:45678
- 画面に表示されたペアリングコードを入力
接続
ペアリング後は、ワイヤレスデバッグのメイン画面に表示されているIPアドレスとポート番号（ペアリング時とは異なる）を使って接続します。
adb.exe connect 192.168.10.101:37983
「ワイヤレスデバッグが接続されました」と表示されれば成功です。
この状態で chrome://inspect/#devices にアクセスすると、ワイヤレス接続されたデバイスが表示され、安定してデバッグできるようになります。
