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を押して保存。
これでOpen tab with urlにURL（dev.your-app.com）を入れると、携帯の画面に自分のローカル環境で動いているアプリが表示されるはず。
あとは通常のChromeのデバッグツールが使えるし、エレメントにマウスオーバーすると、携帯の該当する部分がハイライトされたりと、めちゃ便利！
###参考
ここに全部書いてある。
https://developer.chrome.com/devtools/docs/remote-debugging