案件でスマホ実機特有のUI崩れを調べる必要が出て、「じゃあAndroid実機をChrome DevToolsに繋いでデバッグしよう」と軽い気持ちで始めたら、繋がるまでに思いのほか時間を溶かしてしまった。
chrome://inspectを使ったAndroid実機デバッグは、手順自体はネットに山ほど転がっている。ところが今回ハマったのは、そのどの記事にも書かれていない「adbサーバーが起動していない」という盲点だった。同じ沼にハマる人のために、時系列でやったことと、最終的に効いた一手をまとめておく。
事の発端：動画だけでは原因が特定できない
検証用に置いてあるSHARPのAndroid実機（AQUOS sense4 lite）で、あるページのスクロール挙動がどうもおかしい。動画で撮って見返しても「なんかカクついてるな」「なんか余白ができてるな」というのは分かるが、それ以上の解像度で原因を追えない。フレームを切り出してコマ送りで見比べたりもしたが、憶測の域を出なかった。
こういうときはブラウザのChrome DevToolsでDOM構造とCSSの実際の計算値を見るのが一番早い。スクロールコンテナのscrollHeightやoverflowの実値、アニメーション中の要素の状態は、動画をいくら見返しても分からないが、DevToolsのElementsパネルとConsoleがあれば一発で確認できる。というわけで、chrome://inspectを使ったAndroid実機のUSBデバッグに手を出すことにした。ここまでは何も間違っていなかったと思う。普段はPC版Chromeでしか作業していないので、実機デバッグ自体が久しぶりだったのも油断のもとだったかもしれない。
Android実機がchrome://inspectに表示されない時にまず確認すること
ネットの記事はだいたいこう書いてある。
- 端末の「ビルド番号」を7回タップして開発者向けオプションを出す
- 「USBデバッグ」をON
- USBケーブルでPCと接続
- PCのChromeで
chrome://inspect/#devicesを開く - 「Discover USB devices」にチェックが入っているのを確認
- 端末名とタブ一覧が出るので、対象タブの「inspect」をクリック
言われた通りにやった。だが5の時点で、端末名すら出てこない。
まずはド定番の切り分けから始めた。Android実機がchrome://inspectに表示されないときの基本チェックポイントとして、以下を順番に潰していった。
- USBデバッグの許可ダイアログを見逃していないか → 端末側にダイアログは出ていない
- USB接続モードが「充電のみ」になっていないか → 確認すると案の定「充電」になっていたので、「ファイル転送・Android Auto」に変更
- ケーブルやポートを変える → 変えても変化なし
USB用途を変えてケーブルを挿し直したところ、状況は変わった。「デバイス自体が一覧に出ない」状態から、「デバイスは出るがOffline」という状態に進んだ。
Chrome DevToolsで「Offline」「Pending authentication」から進まない原因
chrome://inspect/#devicesの画面には、こう表示されるようになった。
【Offline / Pending authentication: please accept debugging session on the device.】
「端末側で承認すればいいだけだな」と思い、画面ロックを解除した状態でケーブルを挿し直したり、開発者向けオプションの「USBデバッグ認証を取り消す」をタップしてから繋ぎ直したり、PCのChromeを再起動したりと、思いつく限りのことを試した。
それでも変わらない。念のため端末の日時が自動設定になっているかも確認した（ADB認証はタイムスタンプを含む鍵交換をするので、時刻がズレていると失敗すると聞いたことがあったからだ）。それも問題なし。
極めつけに、別のPCに繋ぎ替えても同じ症状が出た。ここで「これは端末側の問題では」という当初の疑いは崩れ、「PC2台とも同じ症状ということは、PC側かAndroid側かの単純な二択では説明がつかない何かがある」というところまで振り出しに戻った。正直この時点で、実機デバッグを諦めてPC版Chromeのモバイルエミュレーションで妥協しようかとも考えた。
突破口：Android StudioなしのPCでは「adbサーバー」が起動していない
行き詰まって検索していたときに見つけた記事が突破口だった。
chrome://inspectは、adbサーバーがローカルの5037番ポートに既に居ることを前提に、そこへ繋ぎにいくだけ。Chrome自身はadbサーバーを立てない。
これを読んで、これまでの試行錯誤がすべて的外れだった理由が分かった。Android StudioやReact Native、Flutterのような開発環境が入っているPCでは、ビルドやデバイス認識のために裏で常にadbサーバーが起動している。だから「Chromeを開くだけで繋がる」のが当たり前になっていて、adbサーバーの存在を意識する機会自体がない。
今回使っていた検証用PCには、そうした開発環境が入っていなかった。つまり、いくら端末側やUSB設定をいじっても、そもそも受け皿となるadbサーバーが存在しないので、chrome://inspectはいつまでもPending authenticationのまま——という話だった。承認ダイアログすら出ないのも道理で、サーバーが居ないと端末に許可を求めるきっかけ自体が発生しないらしい。
解決策：adb devicesコマンドでadbサーバーを手動起動する手順
- Googleの公式ページから「SDK Platform Tools」だけを単体でダウンロードする（Android Studio本体は不要）
- zipを展開する
- 展開したフォルダの中でPowerShellを開き、次の1行を打つ
.\adb devicesこれでadbサーバーが起動する。「daemon not running; starting now」的なメッセージが出れば合図。
- 端末側の画面ロックを解除して、ケーブルを挿し直す
- 今度こそ「USBデバッグを許可しますか？」のダイアログが端末に出るので、「常に許可」にチェックして承認
ただ、ここでもう一段ハマった。もう一度.\adb devicesを叩くと、今度はunauthorizedという表示になった。サーバーとの通信自体はできているが、端末側の承認がまだ通っていない状態らしい。
これは単純で、端末の画面をよく見ると許可ダイアログが出ていた（画面が暗くなっていて気づいていなかった）。ダイアログで許可し、ケーブルを一度抜き差ししたところ、chrome://inspect側にも端末名が表示されるようになった。
対象タブの「inspect」を押すと、PC側にDevToolsウィンドウが立ち上がり、実機の画面を操作しながらElementsパネルでDOM・CSSを確認できるようになった。ここまで来ればあとはいつものデバッグ作業と同じだ。実機の生のスクロール挙動をタッチしながら、その場でComputed StyleやscrollHeightの値を見比べられるのは、動画をコマ送りで見ていた頃とは比較にならない情報量だった。原因の当たりも、DevToolsを開いて数分で付けられた。
なお今回はchrome://inspectの「Discover USB devices」のチェックは外さずそのままにしたが、記事によっては外した方が外部adbサーバー経由に一本化されて安定すると書かれていたので、次回不安定になるようならそちらも試してみるつもりだ。
まとめ：Android実機のChrome DevTools接続で詰まったらadbサーバーを疑う
今回沼にハマった一番の原因は、「adbサーバーの有無」というレイヤーの存在をそもそも知らなかったことに尽きる。手順記事の多くは開発環境が入っているPCで書かれているので、このステップが省略されがちで、「USBデバッグをONにしてケーブルを繋げば繋がる」という前提で書かれている。普段開発機以外でこの作業をしない人（自分のように、検証専用にサブPCを置いているようなケース）は、この前提から漏れやすい。
得られた教訓はシンプルで、「手順通りにやっても繋がらないときは、手順そのものが前提としている環境が自分の環境と違う可能性を疑う」ということだった。今回で言えば、「開発環境が入っているPC」という暗黙の前提が、自分のサブPCには当てはまっていなかった。
同じようにAndroid実機をChromeのDevToolsに繋ごうとして「別PCで試しても直らないOffline/Pending authentication」に当たった人は、まずadbサーバーが起動しているかどうかを疑ってみてほしい。adb devicesをターミナルで一度叩くだけで解決する話だった。
