AndroidのChromeを開発者ツール(デベロッパーツール)で分析する方法！
Web開発ではChromeの開発者ツール(デベロッパーツール)はよく使うものであり、必須とも言えるくらい便利なものです。レスポンシブでスマホ用のレイアウトを作る際に、PCのChromeの開発者ツールでDeviceをスマホに変更した上で、開発者ツールを開いて検証しつつ対応することはよくありますが、中にはスマホ向けページはAndroidの実機で検証したい時もありますよね。
そこで今回はAndroidの実機のChromeで表示している内容を開発者ツールで分析する方法を紹介したいと思います。PCで表示した際と実機のAndroidで表示が微妙に異なるときなどにこの方法を使えば、どこが原因なのかをすぐに見つけ出すことができるのでとても便利です。
Android端末でUSBデバッグを有効にする方法！
Androidの「設定」から「システム」にある「開発者オプション」を開いてUSBデバッグをONにします。※開発者オプションがすでに表示されていて、USBデバッグのやり方が分かる人はAndroid端末をWi-Fi経由でadb接続する方法！まで飛ばして読んでください。
Androidの「設定」から「システム」にある「端末情報」にあるビルド番号を連続でタップします。
「これでデベロッパーになりました！」と表示されればOKです。
これで「開発者オプション」が表示されるようになっています。
「開発者オプション」を開いてUSBデバッグをONにします。
AndroidのChromeの内容を開発者ツールで表示する方法！
ここからはPC側での操作となります。ここからはAndroid SDKをインストールして、コマンドプロンプト上でadbコマンドが使える状態になっていることが前提なります。導入していない人は、先にAndroid SDKをインストールしてAndroid SDKのPathを通してください。
Download Android Studio and SDK tools
PCのGoogle Chromeで下記URLを開きます。
chrome://inspect/#devices
開発者ツールで見たいタブを選んで「inspect」を押すと開発者ツールが開きます。通常の開発者ツールと異なるのが、左のウィンドウに実機でのスマホと同じ表示がされるようになります。この状態ではスマホと表示が同期されていますし、PC側からもスクロールが可能になります。
Elementsタブで要素を選択するとハイライトされるなど通常の開発者ツールと同じように表示されます。
Networkタブではスマホ実機での表示速度の計測も可能です。このサイトのトップページで試した結果ですがFinish:2.42sでした。
スマホ側をスリープすると「The tab is inactive」と表示されます。
Android端末をWi-Fi経由でadb接続する方法！
Android端末をWi-Fi経由でadb接続する方法もあるので興味があればこちらもご覧になると便利かもしれません。基本的に優先で接続しいたほうが簡単ですので、Wi-Fi経由で接続するのは特殊な端末のときしか使わないのですが、覚えておいて損はないと思います。
Android端末をWi-Fi経由でadb接続する方法！今回の個人的感想＆まとめ
今回紹介したのはAndroidのGoogle Chromeで表示している内容を開発者ツールで見る方法でした。私も今までPC上でスマホ向けレイアウトを作っていましたが、どうしても実機のAndroidとの差異が出てしまう部分があったりしたのでその際にはこの方法でAndroidのChromeを開発者ツールで見ると原因がわかりやすいですし、非常に役に立つのでおすすめです。
基本的にPCで開発者ツールを使うのと同じなので、いつもどおり使うことができるのが良いですね。スマホの表示もPC側で出してくれるので、実機を見なくても使えます。スマホ実機ならではの操作を試したいときは実機で操作しつつConsolelogなどを確認することでテストもできます。
スマホ向けレイアウトの開発の際には、ぜひ実機を使ってこの方法で開発者ツールを活用してみてはいかがでしょうか？