読者です 読者をやめる 読者になる 読者になる

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

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

 

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

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

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

 

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

http://people.apache.org/~pmuellr/weinre/docs/latest/

 

こいつは、ローカル等に立てたサーバとスマートフォンで通信することで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の開発ではほぼ必須のツールとなります!