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

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

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた