weinreではじめるAndroid/iPhoneデバック！

AndroidやiPhone実機でしか再現しないバグって良くありますよね。

モバイルシミュレータやSafariのUA変更でスマートフォン向けのWebページを見ることはできますが、実機でしか再現できない問題のケースはよくあること。

また、PhoneGapなどで開発している場合はconsoleからインタラクティブにJSを実行して動作確認をしたい時もあります。

PC向けならFireBugやWebkitのJSコンソールで解決するわけですが、mobile safariは出バックモードにしてもせいぜいがエラー数が出る程度。

そんな時に重宝するのがweinreです。

こいつは、ローカル等に立てたサーバとスマートフォンで通信することでChromeのJSコンソール等を利用することでリモートデバックが可能になるというすぐれものです！

機能としてはブレイクポイントやログの表示はもちろんDOM解析にリソースの表示、JSのインタラクティブシェルまで使えます。

導入はとても簡単。まずはnpmを利用してインストールを行います。

npm -g install weinre

次いで、サーバを起動

weinre --boundHost -all-

ここで重要なのではboundHostを設定することです。ここを設定しない場合、localhostからのアクセスしか受け付けないので、非常に不便です。

起動したら、HTMLで下記のようにJSを読み込むようにします。

        <script type="text/javascript" charset="utf-8" src="http://192.168.0.2:8080/target/target-script-min.js#anonymous"></script>

IPを直接指定していますが、ここをlocalhostにしてしまうと、実機やエミュレータ上のlocalhostを参照してしまうため注意してください。iOSシミュレータは動くかもしれませんが、Android エミュレータでも動作しないので。

そちらにアクセスしたら下記のURLにアクセスします。後の使い方はJSコンソールと同じですね。

http://192.168.0.2:8080/client/#anonymous

複数の端末を使い分けたい時は#以下を変更すれば大丈夫です。

非常に便利なツールなのでぜひ入れてみましょう。特にPhoneGapの開発ではほぼ必須のツールとなります！