しまてく

学んだ技術を書きためるブログ

weinreでリモートデバッグ

JavaScript

JSテクニックバイブルの勉強会でさらーっと触れた後に本家を見てみたらいくつか
変更点があったのでキャッチアップの目的でまとめてみました。

wenireとは

wenireはWebアプリケーションをリモートデバッグするためのツールです。
裏の通信にはWebSocketが使われており、主にスマートフォンブラウザにおける
リモートデバッグを便利に行う事を想定して作られています。

wenireという名前は「Web Inspector Remote」の頭文字から命名されていて、
読み方は公式によると「ワイナリー」か「わいなー」かどちらかのようです。

公式

http://people.apache.org/~pmuellr/weinre/docs/latest/

インストール

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を解凍するだけですので適当な場所に配置してください。


あ、jarなのでJava*1が必要です。

使い方

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」にアクセスすればこんな画面が表示されます。

各項目について見ていきましょう。

サーバーの各項目



書いてある通り、「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で確認」という事が簡単にできちゃいます。

スマートフォン向けのWebサイトを作る場合に、実機でのデバッグにはめちゃめちゃ便利なのでぜひ使ってみてください。

*1:あなたとJAVA、30億のデバイスで走るJava(http://java.com/)