weinreでスマートフォンをデバッグする

Android iPhone JavaScript 
            スマートフォンアプリ開発時のデバッグは大変。

iOSならXcodeのconsole log、AndroidならEclipseのLogCat。 JavaScriptで開発していると、エラーの内容とかがほんと微々たる情報しかでないのでカオスです。

そこで、ブラウザからスマートフォンのリモートデバッグができる「weinre」がとても便利！

スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い スマホの開発が超絶楽に！ weinreでスマートフォンをPCでリモートデバッグ！

ダウンロード

アプリ版があるけどアプリは動作確認できなかったので、今回はjarファイルを実行する形式で。 http://phonegap.github.com/weinre/Installing.html

実行

ダウンロードしたファイルを伸張して、フォルダの中にあるweinre.jarを実行します。 [bash] cd weinre-jar/ java -jar weinre.jar --httpPort 8080 2012-01-13 10:04:07.716:INFO::jetty-7.x.y-SNAPSHOT 2012-01-13 10:04:07.751:INFO::Started SelectChannelConnector@localhost:8080 2012-01-13 10:04:07.751:INFO:weinre:HTTP server started at http://localhost:8080 [/bash]

実行できたら、weinre:HTTP server started atに載っているURLにブラウザでアクセスします。 今回ならhttp://localhost:8080です。

タグの埋め込み

開いたページの「Target Script」に載っているURLのファイルを、アプリ(index.htmlなど)で読み込みます。 僕の環境ではhttp://localhost:8080/target/target-script-min.js#anonymousです。 [html]

[/html]

コンソールを開いてデバッグ開始

以上で設定は終わりです。簡単。 あとは先ほどのhttp://localhost:8080ページの「Access Points」→「debug client user interface」に載っているURLを開くとデバッガにアクセスできます。 Consoleタブでalert("Hello World");ってするとアプリ上でダイアログボックスがでたりします。

詳しくは公式をみたりしてください。

おわり。