目次
Android実機でのWebサイトデバッグ
PCブラウザの開発者ツールにスマホ画面をエミュレートする機能があるとは言え、やはり実機と挙動が異なることは多々ある。
Android実機のChromeで閲覧している画面を、PCのChromeの開発者ツールでデバッグしたい。
解説サイト
Androidの機種によって、ドライバのインストール方法や、USBデバッグの有効化の仕方などに違いがあるため、その辺はその都度調べる。
用意
- Xperia XZ1 での解説
AndroidのUSBデバッグを有効化
「USBデバッグ」という機能を使うが、セキュリティ的に弱くなるので、最初は無効化されている。そのために、まずは「開発者向けオプション」を有効化する。
- [設定]→[システム]→[端末情報]→[ビルド番号] を連続タップ
開発者向けオプションの諸注意
【使えなくなるアプリ】銀行のワンタイムパスワードなどセキュリティが求められるアプリは、起動時に開発者向けオプションの有効を検知すると「オフにしてください」と出て使えなくなるものがある。 ちょっと面倒だが一時的にオフにすれば問題なく使えるようになる（というかデバッグ時のみ一時的にオンにする方がよい）（そもそもできれば私用と開発用端末は分けたい）
【無効化】「開発者向けオプション」を無効に戻したい場合、[設定]アプリのユーザーデータを削除すれば戻る。しかし当然他のユーザーデータも巻き込むため、開発者向けオプションのみ無効にする方法があれば知りたい。
開発者向けオプションを有効化すると [設定]→[システム][開発者向けオプション] が新しくできているので、その中から [USBデバッグ] を探して有効化。
また、ドコモ端末の場合、ドコモの方でもUSBデバッグに何かしら設定があるようで、 [設定]→[ドコモのサービス/クラウド]→[USBデバッグ切替] にチェックを入れる。
PCでUSBドライバのインストール
Windowsの場合、USB Driverが必要となる。Android Studio付属のAndroid Sdk Managerからインストールするのがわかりやすい。
アプリ開発を特にしないのに、Android Studioやそれに付随する不要なファイルが十数GBと重たいので、正直めっちゃ無駄感があるが……まぁ、検索ではAndroid Studio経由の説明が情報多いし、手動と比べるとドライバの更新もしやすくなるので、いいか。
接続
PCとAndroidをUSBで接続する。
PCでADBドライバのインストール
端末専用ドライバをインストールする。機種によって自動的にインストールされるものもあれば、メーカーのサイトからダウンロードするものもある。
デバイスマネージャを開き、スマホの機種名っぽいのが書かれてる項目のプロパティを確認。
きちんと動いていればよし。動いてなければ検索して情報を探す。
Xperiaの場合、以下からダウンロードし、
デバイスマネージャで手動更新。プロパティから[更新]、[ファイルを指定して更新]、さっきダウンロード＆展開したフォルダを指定。
Androidの画面で許可する
「なんやPCがデバッグさせろや言うてきとるけどこいつに情報渡してええんか」と聞いてくるのでOKする。
AndroidのChromeで開発中のページを開く
開く
PCのChromeでデバッグする
アドレスバーに chrome://inspect/#devices としてEnter。
[Discover USB devices] にチェックが入っていることを確認。
これまでの設定が上手くいってると、（少しだけ待つと）[Remote Target] という欄の下にAndroidの機種名と、Chromeの各タブで表示中のページ情報が現れる。現れなかったら何かしら上手くいってない。
ページ情報の中からデバッグしたいページの [inspect] を押すと、ウィンドウが開き、Androidで閲覧中の画面をPC上でも表示できる。そこで開発者ツールも使える。
PC, Androidのいずれでも操作でき、画面は両方で同期される。
これでデバッグが行える。
