Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法
Chrome開発者ツールには、スマホ表示をエミュレートしてくれる機能はありますが、たまに実機じゃないと発生しない現象や、スマホのブラウザだからこそ起こる表示崩れもあります。
そんなときにわざわざ実機を見て、目星を付けながら修正していくのはあまりに非効率です。
今回はAndroid実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法についてまとめておきます。
ちなみに、iOSの場合はシミュレータ.appを使って、Safariの開発者ツールで確認ができます。
1. Android端末側の設定
Android端末側とPCをUSBで接続して検証するので、接続できるように「開発者向けオプション」をオンにする必要があります。
Androidのバージョンによって微妙に異なるみたいですが、Android 9以降であれば［設定］→［デバイス情報］→［ビルド番号］を7回タップすると、「開発者向けオプション」の画面が表示されるので、そこで「On」にチェックを入れればOKです。
Android 9以前のバージョンに関しては、Androidの公式サイトをご覧ください。
開発者向けオプションをオンにしたら、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開発者ツールで表示した方が良さそうです。
