Chrome DevToolsを用いてAndroidスマホでデバッグする
Google Chrome には開発者ツールが付いているのをご存知の方はたくさんいると思いますが，スマホサイトのデバッグをしようと思ったら，このツールにある疑似的なエミュレータで済ませる人も多いのではないでしょうか．
私も普段はそうですが，Chrome で作って公開し，いざスマホの Chrome for Android で確認してみると予想と違うデザインになっていたり，iOS では全然違ってしまっていたり．
最近注目されている PWA も，実機を接続してデバッグすればスマホでの動作を確認できるというメリットもあります．(これ結構大きいと思う)
リモートデバッグの流れ
- Android 端末を PC に接続して検出する
- PC で開発者ツールを立ち上げて設定する
- Android 端末の Chrome for Android でサイトを開く
大まかにはこのような流れで進めます．
用意する環境
- 新しめの Chrome ブラウザを入れた PC (Chrome 32 以降．最新は現時点で 62)
- PC には Google USB ドライバを入れてある (Android Studio の SDK Manager でインストールも可)
- Android 4.0 以降
Android 端末を有線接続する
Android 端末側で設定することとして，本体設定内の開発者向けオプションをオンにし，USB デバッグを許可する必要があります．
開発者向けオプションは Android 4.2 以降のバージョンではデフォルトで非表示になっており，同じく本体設定内の 端末情報 > ビルド番号 を数回タップすると有効になります．
設定したら PC に接続します．Android 端末の画面に許可を求めるダイアログが出た場合は許可します．
Chrome 開発者ツールを立ち上げる
デバッグするページを開く
例として，localhost:5000 に接続することを考えます．PC でこのページを開き，開発者ツールを立ち上げたら次の設定をしていきます．
Android 端末を検出する
開発者ツールの設定から More tools > Remote devices を選択し，Settings で Discover USB devices をオンにします．既に Connected として端末が認識できている場合は，この操作は必要ありません．
ポートフォワーディングを設定する
同じく Setting の項目で，Port forwarding をオンにします．左が Android 端末で接続する URL, 右が PC で開いているページの URL です．
初期設定では両方とも localhost:8080 になっています．ここで，右の URL を localhost:5000 に設定し，Android 端末の Chrome for Android で localhost:8080 に接続すれば完了です．
Android 端末が表示されないときの対処法
方法は簡単ですが，意外と前途多難．しかも，対策があまり載ってません．
Google USB Driver の確認
Android Studio を使っていますが，入れてると思ってたら入れてませんでした．
プライベートブラウジングでは不可
シークレットウィンドウやゲストモードで開いている場合は使えません．意外と見逃しがち？
対応端末？
XPERIA Z5 Premium ではできましたが，Galaxy S4 ではできませんでした．
Galaxy 系はドライブか何かが特殊だった気がしますが，それに起因しているのでしょうか．
最後に
どうしても動作がもたつくところはあるのでレスポンスの速度はあまり参考にできないかもしれませんが，実際の環境に移す前にいろいろと動作を確かめられるにはいいですね．