Chromeのリモートデバッギング / Virtual boxのローカル開発環境にあるアプリを確認する

Virtual Boxのローカル開発環境で動くアプリを、Google Chromeを通してAndroidの実機で見る&デバッグする方法。なんかややこしい…ので適当にイメージ図にしました。個人的にはVagrant使ってますが、使ってなくても同じです。
　　

すでにVirtual boxで開発環境が構築されていて、アプリがブラウザで確認できる状態を前提としています。
また、Mac/PCとAndroidが同じWifiに接続されている必要があります。
また、開発中のアプリへは dev.your-app.com で接続すると過程します。

で、こんなことができて便利。

USB接続

普通にMac/PCとAndroidを繋ぎます。

Chrome

パソコンのChromeを立ち上げて、chrome://inspect/#devicesにいきます。
AndroidのChromeも立ち上げると、下のようになってるはず。

プロキシの設定（Android）

AndroidのSettingにいって、Wifi名を長押し -> Modify network
Show advanced options をタップして以下のように入力して保存。
Proxy hostname : localhost
Proxy port : 9000

プロキシの設定（Mac/PC）

Charlesをダウンロードしてイントール。
起動して、Proxy -> Proxy setting を確認する。

8888というポートをメモします。別のポートでもかまいません。

ふたたびChrome

chrome://inspect/#devicesにいって、Port forwardingをクリック。
Portに9000、IP address に localhost:8888 と入力し、Enable port forwarding にチェックを入れて、Doneを押して保存。

　　
モバイルのChromeも立ち上げた状態で、
Open tab with urlにURL（dev.your-app.com）を入れると、携帯の画面に自分のローカル環境で動いているアプリが表示されるはず。
あとは通常のChromeのデバッグツールが使えるし、エレメントにマウスオーバーすると、携帯の該当する部分がハイライトされたりと、めちゃ便利！
　　

参考

ここに全部書いてある。
https://developer.chrome.com/devtools/docs/remote-debugging