weinreでCordovaアプリをiOSシミュレータとAndroid実機でデバッグしてみる

Homebrewとios-simのインストール
* ios-simをインストールしておくとcordovaコマンドからiOSシミュレータを起動できるようになります。

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
$ brew install ios-sim

weinreのインストールと起動

$ sudo npm -g install weinre

# Androidの実機でも確認したいので、PCのWiFiのIPアドレスを指定する
# ファイアウォールでポートを閉じていないか注意
$ weinre --boundHost 192.168.xxx.yyy --httpPort 9090

Cordovaアプリの作成

$ cordova create weinre com.example.weinre "Weinre Test"

weinre/www/index.htmlに以下を追記

<script src="http://192.168.xxx.yyy:9090/target/target-script-min.js#anonymous"></script>

プラットフォームの追加 〜 確認

$ cd weinre/
$ cordova platform add ios
$ cordova platform add android
$ cordova build
$ cordova emulate ios # iOSシミュレータの場合
$ cordova run android # USB & WiFi接続しているAndroid実機の場合

Chromeから http://192.168.xxx.yyy:9090/client/#anonymous にアクセスして、"Targets"からiOSシミュレータ/Android実機をそれぞれ選択すると、いつもの感じでデバッグできるようになりました。

参考:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Weinre_As_Remote_Debugger
http://gihyo.jp/dev/serial/01/phonegap2/0003
http://stackoverflow.com/questions/16507430/debugging-web-page-in-android-app-using-weinre-cannot-find-debug-target