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

スマートフォンアプリ開発時のデバッグは大変。
iOSならXcodeのconsole log、AndroidならEclipseのLogCat。
JavaScriptで開発していると、エラーの内容とかがほんと微々たる情報しかでないのでカオスです。

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

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

ダウンロード

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

実行

ダウンロードしたファイルを伸張して、フォルダの中にあるweinre.jarを実行します。

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

タグの埋め込み

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

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

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

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

おわり。

Pocket

Posted in Android, iPhone, JavaScript.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">