WebDesigner's Memorandumウェブデザイナーの備忘録

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

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」をクリックします。

chrome inspectページ

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

Android実機で表示しているサイトのChrome開発者ツール

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね