どうも、Tです。
Android機器でWebサイトの表示を確認するためにAndroid StudioのAVDをセットアップしました。
![](https://t-dilemma.info/wp-content/uploads/2020/06/Android-Studio-100x100.png)
今回は、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ブラウザの表示はリンクしています。
どちらかをスクロールや操作を行うともう片方へ同期され同じように動きます。
参考
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QW5kcm9pZCUyMCVFMyU4MSVBRSUyMENocm9tZSUyMCVFMyU4MSVBNyVFOSU5NiU4QiVFNyU5OSVCQSVFOCU4MCU4NSVFMyU4MyU4NCVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSU4NiVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9OTQ1ZWQ5NWQ4ZmMxMTk1NTNlNjEyNTJiOGZkZTliNzI&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob2ppc2hpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kN2YzMTk3MzRjNzA5NDIyMjhlZGExODg5YTExNjFmYQ&blend-x=142&blend-y=486&blend-mode=normal&s=45b5dfe1e1d4622403af4a9a7e6a1d84)
![](https://t-dilemma.info/wp-content/uploads/simplicity-cache/7427c38922690bf8fc57f54d5c374249.jpg)
まとめ
この方法は物理のAndroid端末をUSBで接続しても同じことができます。
AVDではUSB接続をする設定はないので、起動時点でAndroid StudioとパソコンがUSB接続している状態になっているようですね。