🥭

Android端末実機のブラウザ検証

に公開

Android実機端末をUSBで作業PCに繋いで、Chromeのデバッグツールでブラウザ表示を検証する方法です。

Android端末の設定

1. 開発者向けオプションを有効にする

Android端末で「設定 > 端末情報 > ソフトウェア情報 > ビルド番号」を表示して、 You are now a developer! というメッセージが表示されるまでビルド番号をタップする。

※ ビルド番号の場所は機種によって若干異なります(参照: デバイス上の開発者向けオプションを設定する | Android Developers)。

2. USBデバッグを有効にする

「端末情報」画面に戻り、「開発者向けオプション(Developer options)」画面に移動する。
「デバッグ」の項目を探して「USBデバッグ(USB debugging)」を有効にする。

作業端末で検証したい画面を選択

1. USBで作業端末でAndroid端末を接続する

USBで繋ぐとUSBデバッグモードが自動的にオンになる。

2. 検証ツールを開く

作業端末のChromeでDevTools( chrome://inspect )にアクセスすると、「Devices」にUSBで接続されたAndroid端末のChromeで開いているタブのリストが表示されるので、検証したいURLの「inspect」をクリックする。

別ウィンドウで検証画面が開く。

参照

https://developer.android.com/studio/debug/dev-options

Discussion