どうも、Tです。
Android機器でWebサイトの表示を確認するためにAndroid StudioのAVDをセットアップしました。
今回は、AVDで表示されるWebサイトの表示をパソコンのChromeの開発者ツールを使う方法の備忘録。
やりたいこと
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デバッグの有効化を行います。
まずは、「開発者向けオプション」
「設定」->「エミュレートされたデバイスについて」->「ビルド番号」を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端末をUSBで接続しても同じことができます。
AVDではUSB接続をする設定はないので、起動時点でAndroid StudioとパソコンがUSB接続している状態になっているようですね。