Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法

Chrome開発者ツールには、スマホ表示をエミュレートしてくれる機能はありますが、たまに実機じゃないと発生しない現象や、スマホのブラウザだからこそ起こる表示崩れもあります。

そんなときにわざわざ実機を見て、目星を付けながら修正していくのはあまりに非効率です。

今回はAndroid実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法についてまとめておきます。

ちなみに、iOSの場合はシミュレータ.appを使って、Safariの開発者ツールで確認ができます。

1. Android端末側の設定

Android端末側とPCをUSBで接続して検証するので、接続できるように「開発者向けオプション」をオンにする必要があります。

Androidのバージョンによって微妙に異なるみたいですが、Android 9以降であれば［設定］→［デバイス情報］→［ビルド番号］を7回タップすると、「開発者向けオプション」の画面が表示されるので、そこで「On」にチェックを入れればOKです。

Android 9以前のバージョンに関しては、Androidの公式サイトをご覧ください。

Android Developers

Configure on-device developer options  |  Android Developers

https://developer.android.com/studio/debug/dev-options

Learn how to configure system behaviors that help you profile and debug your app performance.

開発者向けオプションをオンにしたら、USBでPCとAndroid端末を接続します。

2. Google Chromeで表示

USBでPCとAndroid端末を接続できたら、Google Chromeの検索バーに下記のURLをコピーして開きます。

chrome://inspect/#devices

「chrome」から始まるURLのようなものは、Google Chrome専用の特殊なページが表示されます。

今回入力したページにアクセスすると、現在Google Chromeと接続可能なデバイス一覧が表示されます。
リストの中にAndroid端末の名前があると思うので、AndroidのGoogle Chromeで開いているウェブページの名前下の「inspect」をクリックします。

クリックしたら、Android端末のGoogle Chromeで開いているサイトが、Chrome開発者ツールで開きます。
あとは通常のウェブサイト同様に開発者ツールを使って検証していけます。

1点注意しておいた方がいいのが、Android端末上のサイト表示と、Chrome開発者ツール上のサイト表示が連動しているため、サイト内をあちこち移動したりスクロールしまくると動作がかなり重くなってしまいます。

目的のページや場所まで移動してから、Chrome開発者ツールで表示した方が良さそうです。