hijiriworld Web

weinreとは

weinre とは、Web Inspector Remote の略で、リモートでのWebインスペクタをサポートするツールです。

この Weinre を、Chrome と iOSシミュレータ で試してみます。

weinreの設定手順

1. node.jsのインストール

nodejs.org から、最新のパッケージをダウンロード。

ダウンロードしたパッケージを展開してインストール。
node.js が usr/local/bin/nodeに、npmが/usr/local/bin/npm にインストールされます。

2. weinreのインストール

npm から weinre をインストール。
ターミナルを起動して以下コマンドを入力。

npm install weinre

※coffee-script、express、npot、underscore も同時にインストールされます。

3. MacのIPアドレスを確認

MacのIPアドレスを確認します。

いま私が使っているMacのIPアドレスは「192.168.151.51」でした。
IPアドレスはそれぞれ違いますから、以後の操作はご自分のIPアドレスに変更して行ってください。

4. weinreを起動

ターミナルで以下コマンドを入力して weinre を起動します。

./node_modules/weinre/weinre –boundHost 192.168.151.51

Chrome で　http://192.168.151.51:8080 にアクセスしてみましょう。
weinre のメイン画面が表示されれば起動成功です。

5. iOSシミュレータにブックマークレットを登録

iOSシミュレータ上で Safari を起動します。

weinre のメイン画面の Target Bookmarklet > bookmarklet url in a textarea: に記述されているスクリプトをブックマークレットとして登録します。

javascript:(function(e){e.setAttribute("src","http://192.168.151.51:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

※iOSシミュレーターのSafariでブックマークレットを登録するには、まず、適当なページをブックマーク登録してから、URLを編集するといいでしょう。

5. デバッグの準備

weinre のメイン画面の debug client user interface から選択して、デバッグ画面を確認しておきましょう。

6. 分析とデバッグ

iOSシミュレータでデバッグしたいWebサイトを開きます。

さきほど登録したブックマークレットを起動。
weinre のデバッグページが以下のようになれば成功です。

あとは、通常のWebインスペクタと同様の操作で、HTML や DOM の分析、スタイルシートやストレージの確認、JavaScript のデバッグなどが行えます。

今回は iOSシミュレータで試してみましたが、実機でも可能。
実機をリモートでデバッグできるのが weinre の特徴ということでしょう。