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で確認

スクリーンショット_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

以上です。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた