スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
こんにちは、寝過ごして長野まで行きそうになったソーシャルクライアント開発のtakimoこと瀧本です。
先週弊社数名がアメリカで行われていたVelocity 2011 - O'Reilly Conferencesに参加しました。
そこではモバイル端末のテストやパフォーマンスについての講演やLTがあったようです。
自分もお土産話を色々聞きたいので詳しくは誰かが書いてくれるはず...です。
その中で気になったプロダクトがあったので紹介したいと思います。
weinre - Web Inspector Remote
weinreはFirebug(Firefox)やWebKitのWebInspectorのようなデバッグ機能をリモートで提供してくれるプロダクトです。 iPhoneやAndroid(2.1以上)には一応コンソール機能のようなものがありますが- 基本的には出力だけ
- ソフトキーボードでデバッグ用コードの入力/文字列だけの表示なので評価が難しい...
- iPhoneでは出力された文字列が全部表示されない(alertなら全文出るがいけてない)
- 狭い画面で何行にも渡るデバッグ情報を見なければいけない
使い道としてはスマートフォンのデバッグもそうですが、遠隔な場所でのぺアプロ・レビューをする時にも効果がありそうです。
対応しているプラットフォーム
- Supported
Android 2.2 Browser application
Android 2.2 w/PhoneGap 0.9.2
iOS 4.2.x Mobile Safari application
BlackBerry v6.x simulator
webOS 2.x (unspecified version)
- Not supported
iOS 3.1.3 or earlier
webOS 1.45 or earlier
どうやって動いているの?
大雑把に仕組みを見てみると、- XMLHttpRequestでWebSocketっぽくクライアントとサーバーで通信する
- サーバー側で入力されたコードをクライアント側で処理(eval)する
- クライアント側のDOM関係のイベントをhookしてDOMの変化をサーバーに伝える
- クライアント側のconsoleオブジェクトをリモート用のconsoleオブジェクトへとoverrideする
どうやって使えばいいのか
公式サイトに載っていますがさらっと。
1) インストール
http://pmuellr.github.com/weinre/Installing.html
記載されているgithubのURLに行き、zipをダウンロードし解凍します。
macで動かす場合は実行ファイルがbuildされているので、実行すればすぐに使えるようになります。
- サーバーの起動 先ほど解凍したディレクトリに入り、下記のコードを実行します。 java -jar weinre.jar -httpPort 8081 もしlocalhost以外の開発環境の場合は以下のようなオプションをつけてみてください java -jar weinre.jar -httpPort 8081 -boundHost hoge.local
- JavaScriptの埋め込み 上記で起動したサーバーにアクセスすると埋め込むためのJavaScriptが発行されているのでそれをサービスに埋め込みます。 Bookmarkletとして実行もできるので、埋め込まなくても実行可能です。
- bodyのbackgroundの色を変える
- alertをだしてみる
- サービス側のconsole.logで出力される文字列がデバッグ画面に表示される
デバッグ環境が豊かになっていくことはとてもすばらしいことだと思うので引き続き目を光らせていきたいと思います。