# Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法 URL: https://webrandum.net/chrome-dev-tool-android-real-machine/ 公開日: 2021-01-06 更新日: 2021-01-06 カテゴリー: コーディング タグ: Android, Google Chrome 出典: Webrandum（著者: サイトウ マサカズ） Chrome開発者ツールには、スマホ表示をエミュレートしてくれる機能はありますが、たまに実機じゃないと発生しない現象や、スマホのブラウザだからこそ起こる表示崩れもあります。 そんなときにわざわざ実機を見て、目星を付けながら修正していくのはあまりに非効率です。 今回はAndroid実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法についてまとめておきます。 ちなみに、iOSの場合はシミュレータ.appを使って、Safariの開発者ツールで確認ができます。 ## 1. Android端末側の設定 Android端末側とPCをUSBで接続して検証するので、接続できるように「開発者向けオプション」をオンにする必要があります。 Androidのバージョンによって微妙に異なるみたいですが、Android 9以降であれば［設定］→［デバイス情報］→［ビルド番号］を7回タップすると、「開発者向けオプション」の画面が表示されるので、そこで「On」にチェックを入れればOKです。 Android 9以前のバージョンに関しては、[Androidの公式サイト](https://developer.android.com/studio/debug/dev-options)をご覧ください。 [![](https://www.google.com/s2/favicons?domain=developer.android.com)Android Developers![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/bc58f892ae7945dd14d79e22dab34d8e4e585c30eaf6f6089318def23961dd42.webp)Configure on-device developer options  |  Android Developershttps://developer.android.com/studio/debug/dev-optionsLearn how to configure system behaviors that help you profile and debug your app performance.](https://developer.android.com/studio/debug/dev-options) 開発者向けオプションをオンにしたら、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」をクリックします。 ![chrome inspectページ](https://webrandum.net/mskz/wp-content/uploads/2021/01/image_1.png) クリックしたら、Android端末のGoogle Chromeで開いているサイトが、Chrome開発者ツールで開きます。 あとは通常のウェブサイト同様に開発者ツールを使って検証していけます。 ![Android実機で表示しているサイトのChrome開発者ツール](https://webrandum.net/mskz/wp-content/uploads/2021/01/image_2.png) 1点注意しておいた方がいいのが、Android端末上のサイト表示と、Chrome開発者ツール上のサイト表示が連動しているため、サイト内をあちこち移動したりスクロールしまくると動作がかなり重くなってしまいます。 目的のページや場所まで移動してから、Chrome開発者ツールで表示した方が良さそうです。