AndroidのChromeブラウザ表示をDevtoolsで操作する

ウェブサイトを作っていると、それほど頻繁ではないにしろ、モバイル端末のブラウザでの表示が意図しない状態であることに気づいて、その原因を調査したり正常に表示できる設定を探したりしたいということがある。
PCであればFirefoxやChromeなどは[F12]キーを押せば開発者用のデバッグ画面が開くので簡単だが、モバイル用のブラウザはモバイル上では開発者用画面が表示できない。まぁ狭い画面にデバッグ画面出されても困るんだけど。

今回はChromeのリモートデバッギングを行う。

WindowsやLinuxではADBツールをインストールする。(Linuxのディストリビューションによっては最初から入っている場合も。)
インストール後のコマンドでのADBの操作は今回は無し。

ADBのインストール

下はUbuntu系のパッケージのインストール方法。
# apt-cache search adb                    ←ADBのパッケージを検索
mobile-broadband-provider-info - database of mobile broadband service providers
libnvidia-ifr1-390 - NVIDIA OpenGL-based Inband Frame Readback runtime library
adb - Android Debug Bridge
android-libadb - Library for Android Debug Bridge
android-libadb-dev - Library for Android Debug Bridge - Development files
android-tools-adb - transitional package  ←これをインストールしたい
android-tools-adbd - Android Debug Bridge daemon
中略
# apt-get install android-tools-adb       ←インストール
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
Starting pkgProblemResolver with broken count: 0
Starting 2 pkgProblemResolver with broken count: 0
Done
以下のパッケージが新たにインストールされます:
  adb android-libadb android-libbase android-libcutils android-liblog android-sdk-platform-tools-common
  android-tools-adb
アップグレード: 0 個、新規インストール: 7 個、削除: 0 個、保留: 1 個。
220 kB のアーカイブを取得する必要があります。
この操作後に追加で 682 kB のディスク容量が消費されます。
続行しますか? [Y/n] y
取得:1 http://jp.archive.ubuntu.com/ubuntu bionic/universe amd64 android-liblog amd64 1:7.0.0+r33-2 [16.6 kB]
取得:2 http://jp.archive.ubuntu.com/ubuntu bionic/universe amd64 android-libbase amd64 1:7.0.0+r33-2 [17.6 kB]
後略

Android側の操作

おそらく「がとらぼ」を見に来るような人は空で憶えていて何時でもオンにできる状態だろうけど、一応。

AndroidのChromeブラウザのDevtoolsを利用する 1
「設定」→「端末情報」→「ビルド番号」を7回ほど連続クリック。これで「開発者向けオプション」が「システム」(あたり)のメニューに表示されるようになる。
「開発者向けオプション」の画面で一番上のスイッチをオン。「Android debugging」(USBデバッグ)をオン。(Androidのバージョンによっては項目名が違う)
ついでに「スリープモードにしない」をオンにしておくと作業中にイラつかなくて済むかも。

PC側のADBのインストールと、Androidの設定でデバッグモードをオンにしたら、Android端末とPCをUSBケーブルで接続する。

AndroidのChromeブラウザのDevtoolsを利用する 2
正しくUSBデバッグモードになっていて、且つPCでADBが利用可能なら、Android側に上のような画面が表示される。
「このパソコンからのUSBデバッグを常に許可する」にチェックを付けてから[OK]を押す。

AndroidのChromeブラウザを起動してデバックしたいウェブサイトのページを開く。

AndroidのChromeブラウザのDevtoolsを利用する 3
PC側のChromeブラウザを開き、URL欄に chrome://inspect/#devices を入力する。
正常であれば、USBで接続されたAndroid端末がRemote Targetとして表示され、そのAndroid上のChromeブラウザで表示中のウェブページが(タブで複数開いているならリストで)表示される。
デバックしたいページの下にある[inspect]をクリックする。
USBデバックの接続が切れたら、または、Android側のChromeブラウザで表示するページを変えたら毎回この画面の作業を行う。ちょっと面倒。

AndroidのChromeブラウザのDevtoolsを利用する 4
[inspect]をクリックしたら別画面でChromeが開いておなじみのDevTools画面が開く。(PC側)
おなじみの方法で調査したい要素のプロパティを調べたり値を変更したりのデバックを行う。

AndroidのChromeブラウザのDevtoolsを利用する 5
PCのDevtools画面でもAndroidで表示しているページの状態を表示できなくはないけど遅すぎるのと操作面で使い物にならないのでAndroid端末のChromeブラウザの画面を見る方が早い。PC側のDevtoolsで(値変更などの)操作した内容が即時でAndroid側のChromeブラウザの表示に反映される。

意図したとおりに表示できなかったのを、Devtoolsで何かの値を変更して意図どおりに表示できるようになったら、その変更した値をメモしてウェブサイト(ページ)側を変更する。モバイル側でページを再表示して正常に表示できればOK。なお、適切にブラウザのキャッシュを削除しないと変更前のコンテンツが再表示されて首を傾げることになるので念の為。もちろん、モバイルのChromeで正しく表示できるように変更したら他のブラウザで正しく表示できなくなるということもありえるので、他の環境でも正しく表示できるよう調整と確認が必要。

モバイル端末での閲覧が多い昨今だが、PC用とAndroid用のChromeブラウザは表示面でほぼ同じのハズだと高を括っていると意外なところで表示が違ったりするのでPCとモバイルでレイアウトや表示が常に意図したとおりに行われるようにウェブサイトを作るためにもモバイル用ブラウザの開発者ツールを活用するのは重要。
縦書き段組のようなトリッキーなことをしなければそこまで全く予想外に表示が異なるとかレイアウトが崩壊するというのは発生しないとは思うけど。

FirefoxもChromeのようにリモートデバッギングはできるけどちょっと面倒。

ちなみに、うちにはSafariブラウザの端末が無いのでiPhoneとかMacで正しく表示できるかは確認できないのよね。iPhoneの表示はあまり無視できないんだけど。IE, Edgeは端から無視。