WebView 中の HTML のデバッグ方法まとめ
iPhone, Android で WebView を用い、HTML5 + CSS3 + Javascript でアプリを開発するケースは、PhoneGap (Cordova) が登場して以来増えつつあるのではないでしょうか。
HTML 開発には Firebug や Web Inspector といったデバッグツールはもはや必須ですよね。
そこで今回は WebView 中の HTML のデバッグ方法をまとめてみました。
1. Android 全般・iOS4 (実機・シミュレータ)・iOS5 (実機)
weinre （ワイナリー）というツールが利用できます。
weinre はウェブサーバとして動作し、そのサーバが提供するスクリプト・ページにアクセスすることで、ブラウザ上でデバッグが行えます。
（なお、この方法は後述する iOS5, 6 においても利用可能です）
・インストール・サーバの起動
weinre は Javascript で記述されており、動作させるには node.js が必要になります。
node.js のインストール方法はいくつかありますが、ここでは nvm を用いてインストールする方法をご紹介します。
nvm (=Node Version Manager) は異なるバージョンの node のインストール・環境切り替えを行うツールで、Ruby における rvm に相当します。
$ git clone git://github.com/creationix/nvm.git ~/nvm
$ . ~/nvm/nvm.sh
$ nvm install 0.8.11
$ nvm alias default 0.8.11
node のインストールが完了したら、weinre をインストールします。
$ npm install weinre
続いて weinre のサーバを起動させます。
デフォルトでは 8080 ポートで待ち受けします。
$ weinre --boundHost -all-
・使用方法
weinre サーバが起動したので、いよいよデバッグを開始しましょう。
まずはデバッグを行いたい HTML の head タグの中に下記を記述します。（IP アドレスは上記サーバを起動させたマシンのものに置き換えて下さい）
<script src="http://192.168.1.99:8080/target/target-script-min.js#identification"></script>
続いて、デバッグツールを動作させる PC で、下記アドレスに WebKit ベースのブラウザでアクセスします。（IP アドレスは上記サーバを起動させたマシンのものに置き換えて下さい）
http://192.168.1.99:8080/client/#identification
その後、アプリを起動し、上記 script タグを埋め込んだページを開くと、先ほどのブラウザにてデバッグが行えるようになります。
また、weinre はマルチユーザに対応しており、上記 URI の #identification の部分を変更すると別のセッションになります。
・所感
weinre は機種を問わず同一の UI で利用できる点が良いですね。
サーバを一個立ちあげておけば複数人で利用できるのも便利です。
難点としては動作速度が少々遅いことがあげられます。
2. iOS5 (シミュレータ)
WebKit の Web Inspector が利用できます。
・使用方法
AppDelegate に下記コードを追加します。
[NSClassFromString(@"WebView") performSelector:@selector(_enableRemoteInspector)];
その後、アプリを起動し、Chromium のバージョン 12 で下記アドレスにアクセスします。
http://localhost:9999/
シミュレータ上からデバッグを行いたいページに移動後、上記ページを更新し、対象の HTML 名のリンクをクリックすればデバッグが行えます。
・所感
iOS5 のシミュレータ専用であり、ブラウザのバージョン（正確にはブラウザが実装している WebSocket のプロトコルのバージョン）も限られる為、汎用性は低いですが、その分高速で Web Inspector ならではの恩恵が受けられます。
利用出来る状況ならば積極的に利用したいですね。
3. iOS6 (実機・シミュレータ)
Safari の Web Inspector が利用できます。
・使用方法
実機・シミュレータにて設定→ Safari →詳細→ Web インスペクタをオンにします。
続いてアプリを起動し、デバッグを行いたいページに移動します。
その後 Safari のメニュー→開発に、シミュレータなら iPhone Simulator、実機なら端末名が表示され、マウスホバーするとページの一覧が表示されますので、対象のページをクリックすれば Web Inspector が起動します。
・所感
XCode 4.5 以上で Safari 6 が必要になりますが、シミュレータ・実機共に高速で Javascript のステップ実行なども行え、とても便利です。
こちらも利用出来る状況ならば積極的に利用したいですね。
以上、駆け足ではありましたが WebView 中の HTML をデバッグする方法まとめでした。
