JavaScript
weinre

iOS/Androidブラウザでデバッグ

More than 1 year has passed since last update.

iOSやAndroid上でJavaScriptが期待したとおりに動いてくれない。
特にAndroid2.3系では毎回つまずいてしまいます。

そこで、リモートで手軽にデバッグ出来る便利なツールを教えてもらいました。

weinre

このツールを使えばスマホのブラウザやアプリのWebViewのjs, css, DOMやらをPCからリモートで色々できて便利らしい。

インストール(最新版はnode.jsで実装されています。)

% npm -g install weinre

weinreを起動

% weinre --boundHost 192.168.xxx.xxx

デフォルト起動だと、ローカルホストからの接続しか受け付けないので--boundHostオプションでIPアドレスを与えます。

ブラウザからhttp://192.168.xxx.xxx:8080/へアクセスして、こんな画面が出たら準備完了です。

weinre01.png

あとはスマホからデバッグしたいページを表示して、そのページのHTMLを変更出来るのであれば、スクリプトタグを貼り付けるのが手軽ですが、出来ない場合はブックマークレットを使います。

weinre02.png

debug client user interfaceのリンクから、見慣れた画面へ。

weinre03.png

使い方はFireBugやChromeのデベロッパーツールと同じです。
DOMを選択するとブラウザ側の要素にハイライトが出て、本当に同じように使えます。

weinre04.png

めっちゃ便利でした!