weinreでリモートデバッグ
JSテクニックバイブルの勉強会でさらーっと触れた後に本家を見てみたらいくつか
変更点があったのでキャッチアップの目的でまとめてみました。
wenireとは
wenireはWebアプリケーションをリモートデバッグするためのツールです。
裏の通信にはWebSocketが使われており、主にスマートフォンブラウザにおける
リモートデバッグを便利に行う事を想定して作られています。
wenireという名前は「Web Inspector Remote」の頭文字から命名されていて、
読み方は公式によると「ワイナリー」か「わいなー」かどちらかのようです。
インストール
npm
Node.jsがインストールされていてnpmが使えるぜ!という方はnpmインストールできます。
sudo npm install --g weinre
バイナリパッケージ
Node.jsはインストールしてないよ!とかどこでも動かしたいからバイナリがいい!という方はこちらの
バイナリパッケージの方法でインストールします。
ダウンロード先
http://people.apache.org/~pmuellr/weinre/builds/
上のURLから欲しいバージョンのファイルをダウンロードします。
ファイルにはjarファイルとMac用のappバンドルがありますが、オプションを指定するためにはjarが必要なので
迷わずjarを落としておけばいいと思います。
インストールといってもzipを解凍するだけですので適当な場所に配置してください。
使い方
wenireサーバーの起動
まずはリモートブラウザを待ち受けるためのwenireサーバーを起動します。
以下の例はサーバーのIPアドレスが192.168.0.4の場合の例です。
- npmでインストールした場合
weinre --boundHost 192.168.0.4 --httpPort 8888
- jarファイルの場合
java -jar weinre.jar --boundHost 192.168.0.4 --httpPort 8888
サーバーが起動したら、「http://192.168.0.4:8888」にアクセスすればこんな画面が表示されます。
各項目について見ていきましょう。
サーバーの各項目
- debug client user interface: http://192.168.0.4:8888/client/#anonymous
- アタッチされたブラウザ一覧が見れ、ここからリモートデバッグを行う。
- documentation: http://192.168.0.4:8888/doc/
- 親切なドキュメント(英語)
- target demo: http://192.168.0.4:8888/demo/weinre-demo-min.html#anonymous
- 後述するTarget Scriptがすでに読み込まれたデモ用テストページ。
書いてある通り、「http://192.168.0.4:8888/target/target-script-min.js#anonymous」をページに埋め込むと
weinreでリモートデバッグが可能になります。
「#anonymous」の部分はweinre側で相手を識別するための一意な名前になっていて、アプリケーションごとに
デバッグのチャンネルを分ける、というような場合に利用します。
デバッグしたい対象のページが自分の管轄外、というような場合でもブックマークレットを使えばリモートデバッグ可能になります。
weinreサーバーへのアタッチ
特にスマートフォンである必要もないのですが、ここではあえて手持ちのAndroidでやってみます。
- まずデバイス側のブラウザで「target demo」ページにアクセス。(minifyの有無はどっちでもいいです)
- するとweinre側の「debug client user interface」にアクセスしたブラウザが表示されます。
- ここで例えばalertをしてみると...
alert("This message shows from weinre console!");
- デバイス側ではalertが表示されます
- DOM要素に対してstyleの変更をしてみると...
document.getElementsByClassName("blue")[0].style.color = "yellow";
- ちゃんと変わっています
まとめ
もちろん、DOM要素のインスペクトやconsole系のAPIも使えるので
「気になる要素をインスペクトして直接DOM編集」とか
「ガシガシログを出すようにしてweinreで確認」という事が簡単にできちゃいます。
*1:あなたとJAVA、30億のデバイスで走るJava(http://java.com/)