PCを使ってAndroidのChromeのデベロッパーツールを表示する方法

AndroidのChromeでの検証でデベロッパーツールを表示したいということがあったので備忘録に…。

必要なもの

・検証用Android
・USBケーブル(データの送受信が行えるものであればおそらく動くはず…)
・PC(今回macを使用しました)

Androidでの準備

Androidを「開発者モード」にする

1.設定からビルド番号を表示
検証端末によっては以下のように場所が異なるそうです。

Android 9（API レベル 28）以上
　[設定] > [デバイス情報] > [ビルド番号]
Android 8.0.0（API レベル 26）および Android 8.1.0（API レベル 26）
　[設定] > [システム] > [デバイス情報] > [ビルド番号]
Android 7.1（API レベル 25）以下
　[設定] > [デバイス情報] > [ビルド番号]

2.ビルド番号を７回タップ
端末にパスワードをかけている場合はパスワードを聞かれるので入力してください。

3.USBデバッグを有効にする
「開発者向けオプション」が選択できるようになっているのでそこからUSBデバッグを有効にする

Android 9（API レベル 28）以上
　[設定] > [システム] > [詳細設定] > [開発者向けオプション] > [USBデバッグ]
Android 8.0.0（API レベル 26）および Android 8.1.0（API レベル 26）
　[設定] > [システム] > [開発者向けオプション] > [USBデバッグ]
Android 7.1（API レベル 25）以下
　[設定] > [開発者向けオプション] > [USBデバッグ]

手順

1.端末とPCをUSBケーブルで接続

2.PCのChromeで以下アドレスにアクセス

chrome://inspect/#devices
端末の方で許可が求められた時はOKを押してください

3.端末でChromeを開く

4.2の画面にてinspectを押下

5.デベロッパーツールが表示できる

まとめ

Console、Elementsなどが使えるのでとても便利ですね…。
思っていたよりも簡単に画面が開けたので「スマホでの細かい見た目を調節したい」や「javascriptでconsoleに表示をしたい」なども簡単にできますね。

おまけ

macにAndroidを接続しても認識されない場合は以下の手順を行う。

1.PCで「システム情報」を表示
Finderで[アプリケーション] > [ユーティリティ] > [システム情報]から表示できます。

2.表示された画面で「製造元ID」を確認する
[ハードウェア] > [USB] > [(USBで繋いだ端末の)製造元ID]で見ることができます。

3.ターミナルでコマンドをうつ

$ echo "<製造元ID>" >> ~/.android/adb_usb.ini

※ <製造元ID>　には2で確認した製造元IDを入れる

参考
デバイスの開発者向けオプションを設定する
Android の Chrome で開発者ツールを使う方法
MacでAndroidを接続しても認識されない場合の対応