weinreって？

weinreとは、サイトでは次のように書かれています。weinre is Web Inspector Remote.。
この単語の頭2文字ずつをつなげて「we in re」ということのようです。読みは「ワイナリー」とか「ワイナー」みたいな。

つまり、リモートでデバッグができる、ということです。百聞は一見にしかず、ということで、実際に使ってみたものの動画キャプチャをアップしているので、下の動画を見てみてください。きっとその機能に驚くはずです。(ちょっと画面が小さいので、720pにしてフルスクリーンで見るといいかも）

weinreをターミナルから実行する

さて、今回のデモでやっているように、weinreをターミナルから実行してみます。（社内のサーバに設置しておくときにもやりやすいかと思います）

まず、Githubから落としてきたファイルを解凍します。生成されるファイルは2つで、使う方はweinre.jarのほうです。場所はどこでもいいので、あとあと使いやすい場所に保存しておくといいでしょう。

次に、ターミナルを起動します。通常は、アプリケーション > ユーティリティのフォルダの中にアプリケーションがあります。

起動したら、上記で保存したファイルの場所まで移動してください。（操作がよくわからない人は、cd (cdの後ろに半角スペース）と入力後、保存したフォルダをFinderで表示し、そのフォルダをターミナル上にドラッグ&ドロップし、Enterキーを押すと移動できます）

続いて、java -jar weinre.jar --httpPort 8080と入力し、Enterキーを押します。エラーが特になければ、実行成功です。

ブラウザでweinreを表示する

起動が無事完了したら、あとはブラウザで実行すればOKです。Google Chromeを立ち上げ、http://localhost:8080/にアクセスしてください。

デモで見た画面が表示されればOKです。ページが表示されたら、ページ中程にあるbookmarklet url in a preと書かれた箇所にあるJavaScriptのソースをコピー^*1します。

コピーしたら、一番上にあるリンク http://localhost:8080/client/#anonymous をクリックしてデバッグページを表示させます。

続いて、iPhoneエミュレータか、別のGoogle Chromeのウィンドウでリモートデバッグしたいページを開き、*1でコピーしたJavaScriptをロケーションバーに貼りつけて実行^*2してください。

デバッグページの画面にデバッグしたいページのURLが表示されれば接続完了です。あとは、Google Chromeで普段行なっているのと同じようにデバッグすることができます。

Tips

実はファイルを落としてきてやる方法以外に、weinreのAPIがすでに用意されていて、そちらを使うことで手前で準備しなくてもリモートデバッグを体験することができます。

http://debug.phonegap.com/client/#hogeにアクセスし、*2で実行したJavaScriptの、読み込むJS部分をhttp://debug.phonegap.com/target/target-script-min.js#hogeに変更すればOK。

ちなみに、#hogeとなっている箇所（ローカルで実行しているもの、APIどちらも）はIDになっていて、それを任意の文字列に変更し、JSを読み込ませるブックマークレットの部分のIDも同じものにすることで、ひとつのサーバで複数のページのデバッグができるようになります。(※http://localhost:8080/client/#debugtest のように)

APIを利用する場合は、実機でも確認することができるのでさらにそのすごさを実感することができると思います。（ネットワークの設定などをいじれば、同じネットワーク内のものであればローカルで準備したものでも実機での検証ができますが、ちょっと話がそれるので割愛）