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

Shunsuke Sawada

エミュレーターを動かしつつ、エミュレータ内の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で確認

スクリーンショット_2018-03-17_16.36.45

More > Remote devices

Settings

Port forwarding にチェック

スクリーンショット_2018-03-17_16.52.40

Device

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

スクリーンショット_2018-03-17_16.38.14

スクリーンショット_2018-03-17_16.39.41

以上です。

2
Shunsuke Sawada

おすすめの記事

AUSワーホリの人向け携帯電話とかインターネット事情
14
Chromeのリモートデバッギング / Virtual boxのローカル開発環境にあるアプリを確認する
30
Rails / できるだけ高速に画像をアップロードする
84