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

Shunsuke Sawada

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

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

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

USB接続

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

Chrome

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

プロキシの設定(Android)

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

プロキシの設定(Mac/PC)

Charlesをダウンロードしてイントール。
起動して、Proxy -> Proxy setting を確認する。
Screen Shot 2014-09-11 at 7.39.38 PM
8888というポートをメモします。別のポートでもかまいません。

ふたたびChrome

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

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

参考

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

30
Shunsuke Sawada

おすすめの記事

webpackを使ってJSとCSSをコンパイルする(ES6 / Sass)
Turbolinks で Google adsense が正しく表示されない時の対処方法
5
RailsでGoogle mapsを使いこなすためのメモ 2 / 地図デザインのカスタマイズ
2