Android Studio AVD上のChromeの開発者ツールを使う

どうも、Tです。

Android機器でWebサイトの表示を確認するためにAndroid StudioのAVDをセットアップしました。

AndroidのWebブラウザテスト環境にAndroid Studioを導入する
どうも、Tです。 Webサイトを制作して、スマホ表示に問題ないかの確認で開発者ツールは使いますが、あれも完璧ではありません。 ...

今回は、AVDで表示されるWebサイトの表示をパソコンのChromeの開発者ツールを使う方法の備忘録。

スポンサーリンク
アドセンス1

やりたいこと

Windows10のChromeブラウザの開発者ツールをAndroid端末(のChrome)に接続して、Androidが接続しているWebサイトの調査が行えるようにするのが目的です。

環境

  • ホスト:Windows10 バージョン1903
  • Android Studio 4.0 for Windows 64-bit

設定

Windows側の準備

Windows側のAndroid Studioの設定をしておきます。

「Settings」->「System Settings」->「Android SDK」->「SDK Tools」の中にある「Google USB Driver」がインストールされているか確認します。

未導入の場合は、インストールしておきます。

AVDのAndorido側の準備(USBデバッグの有効化)

AVD側でUSBデバッグの有効化を行います。

操作方法は、AVD・Androidの機器、バージョンにより異なります。

まずは、「開発者向けオプション」

「設定」->「エミュレートされたデバイスについて」->「ビルド番号」を7回クリックします。

「設定」->「システム」->「開発者向けオプション」をクリックし、「USBデバッグ」を有効にします。

AVDのChromeでWebサイトを開いておきます。

Chromeの開発者ツールを使う

パソコンでChromeを開きURL「chrome://inspect/#devices」にアクセスします。

「Discover USB devices」にチェックが入っていること確認します。

AVDのChromeに接続されていれば、「Remote Target」「sdkxxxxx」が表示され、AVD側で開いているWebサイトのタイトル(ここでは、Tのジレンマ)が表示されます。

「inspect」をクリックします。

パソコンのChromeの開発者ツールえAVDで開いているWebサイトのデバッグが行えるようになります。

なお、AVDとパソコンChrome側のWebブラウザの表示はリンクしています。

どちらかをスクロールや操作を行うともう片方へ同期され同じように動きます。

参考

Android の Chrome で開発者ツールを使う方法 - Qiita
スマホのサイト作っててPCブラウザのUA偽装じゃなくて実機で見たいってことはよくある。 実機で見ながらHTMLとかCSSをいじって確認したいと思ってスマホで開発者ツール的なのが無いかと探したらあった。 あったけど試したらうまくいかな...
Android 端末のリモート デバッグを行う  |  Chrome DevTools  |  Google Developers
Windows、Mac、または Linux コンピュータから Android 端末上のライブ コンテンツのリモート デバッグを行います。
Androidエミュレータで表示しているウェブサイトをChromeでデバッグする
エミュレーターを動かしつつ、エミュレータ内のChromeで見ているページをデバッグしたい。 実機の場合と同様だけど、エミュレータでもできることを知らなかった。 ### デバッグモードをO...

まとめ

この方法は物理のAndroid端末をUSBで接続しても同じことができます。

AVDではUSB接続をする設定はないので、起動時点でAndroid StudioとパソコンがUSB接続している状態になっているようですね。

スポンサーリンク
アドセンス1
アドセンス1
ブログランキング・にほんブログ村へ

シェアする

フォローする