アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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 をデバッグする方法まとめでした。