Androidエミュレータで表示しているウェブサイトをChromeでデバッグする

エミュレーターを動かしつつ、エミュレータ内のChromeで見ているページをデバッグしたい。
実機の場合と同様だけど、エミュレータでもできることを知らなかった。

デバッグモードをONにする

Pixel 2 の場合

Settings > System > Advanced > About emulated device > Advanced > Build number

Build number を7回タップするとONになる。

Settings > System > Developer options

にいって USB debugging をONにすれば準備OK。

　　

Chromeで確認

More > Remote devices

Settings

Port forwarding にチェック

Device

左のデバイス名の所がグリーンになっていることを確認して、クリック。
あとはウェブサイトの右に出ている Inspect ボタンを押せば、要素の検証とかが可能となります。もちろん JS の console とかも使えます。べんりー。

以上です。