ここでやりたいことは
- ケーブルレスでリモートデバッグ
- Cordova/PhoneGapなスマホアプリのデバッグ
- OS、ブラウザの縛りなし
です。
ブラウザがネイティブでサポートしてくれるようになってずいぶんリモートデバッグも楽になってきました。
しかし、iOSにしてもAndroidにしてもケーブルで接続しないといけない。めんどくさい。。ケーブル挿したくないし。
Cordova/PhoneGapを使ったハイブリッドアプリとかは対応してないし。
と考えたところ原点回帰とはいいませんがやはりweinreに行きつくのかな。
weinreが登場する前は自力でsocket使ってjavascript送りつけてたなぁ（遠い記憶
そんなわけで久々にweinreを使ってみました！な覚書です。
覚書するほどでもないですがｗ
weinreって何者？というところはどこか他のところで見てもらえばいいです。
例えばweinre -Homeとか。
とはいえ簡単に説明しておきましょうかね。
一言でいえば「ブラウザ版リモートデバッギングツール」でしょうか。
リモートでWebインスペクタが使えるってやつです。
デバッガといっても単なるWebインスペクタ。なので、weinre -Homeにもあるようにケーブル接続すれば
- AndroidでChromeならWindowsやOS XのChrome
- iOSでSafariならOS XのSafari
- でデバッグ可能なんです。でもケーブル接続が嫌なんです(｀・ω・´) そしてCordova/PhoneGapなアプリのデバッグもしたい。。
ではでは、変な前置きが付きましたがやっとweinreの導入に移ります。
weinreの導入
weinreはnode.js上で動きます。
そのためweinreに先行してnode.jsをインストールしておく必要があります。
node.jsの導入
node.jsのオフィシャルサイトに行けばインストーラがあります。
それを使ってサクッとインストールしてください。
weinreの導入
「導入」というと大層な作業が必要そうですが、npmの管理下にあるのでコンソール（Windowsだとコマンドプロンプト）で1コマンド叩けばおわりです。
npm install weinre
たったこれだけ。なんてお手軽。
weinreの起動
導入できたら起動させましょう。
実用的には「--boundHost」（※）とかのパラメータつけないとですが、とりあえず動かしましょうってことでパラメータなんもつけてません。
※ホスト名を設定するパラメータで、設定しない場合「localhost」でのアクセスになります。なので同じネットワークにいる場合でも他の端末からアクセスできません。
ちゃんとリモートデバッグしたければ「--boundHost (IPアドレスとか)」なオプションつけて起動してください。
./node_modules/weinre
node_modules\.bin\weinre.cmd
weinreを使ってみる
ブラウザでhttp://localhost:8080/にアクセスしましょう。
下の方にある「Target Bookmarklet」というセクションがあるので、そこに記載されているscriptをコピーします。
あとはデバッグ対象のページを開いているブラウザでブックマークレットを実行するのみ。
ブックマークレットはアドレスバーに貼り付けて実行すると動作する簡易スクリプトです。
ただ、chromeはセキュリティ観点からかそのまま貼り付けてもご丁寧に「javascript:」な部分をカットしてくれます。
なので、事前に「javascript:」を入力してから貼り付けてください。
ここまでできたらhttp://localhost:8080/なページを開いている方に戻って「Access Points」セクションにあるリンクを開きます。
「Targets」にブックマークレットを実行したページがあるはずなので、そのリンクをクリック。
はい、これでリモートデバッグ（リモートでWebインスペクト）できるようになりました。
めでたしめでたし。
補足：止めるのはCtrl + Cな感じで。