BT

モバイル Web アプリをデバッグする - Weinre,JSConsole からRemote Webkit へ

| 作者: Werner Schuster フォローする 9 人のフォロワー , 翻訳者 吉田 英人 フォローする 0 人のフォロワー 投稿日 2011年8月9日. 推定読書時間: 5 分 |

原文(投稿日:2011/07/31)へのリンク

スマートフォンとタブレットの人気上昇によって,Web サイトはモバイルブラウザへの最適化,あるいは少なくとも対応の実施が避けられない状況となっている。しかし最近のデスクトップブラウザが Javascript および DOM 用のフル機能デバッガやプロファイラを提供しているのに比べると, モバイルプラットフォーム 用のデバッグツールはあまりに貧弱だ。デバッグ時に特定のコードに到達したことを確認したり,変数の状態を表示するための方法が,alert() によるダイアログボックスのポップアップやコンソールへのログ表示などに限定されている上,DOM 状態や CSS スタイルの検査なども困難であったり,場合によっては不可能なことさえある。

このような状況を改善すべく,各ブラウザメーカは実用的なデバッガやリモートデバッグ機能などを開発中だが,当面のワークアラウンド (回避策) として役に立つツールもいくつかある。

現在:モバイルデバッグのワークアラウンド

ワークアラウンドと後述する将来的なモバイルデバッグサポートは,どちらも リモート 動作する,という点では共通している。モバイルデバイス上でデバッグを行う代わりに,ネットワークを通じて接続された他のマシン上でデバッグ GUI を使用するのだ。

そのようなツールのひとつに,Patrick Mueller 氏が開発し,現在はPhoneGap プロジェクトに含まれている Weinre がある。Weinre のデバッグ機能は Javascript で記述されていて,例えばデバッグ対象となる HTML ページ内に含めるなどの方法で,これをデバッグターゲットに格納しておく必要がある。デバッグターゲットへのアクセスには同梱されているサーバを使用する。これがデバッグターゲットに接続し,デバッグ GUI との間でメッセージやコマンドのやりとりを行う。デバッグ GUI は基本的には Webkit の Web Inspector で,HTML と Javascript で記述されている。

では Weinre で何ができるのだろう? デバッガ GUI をデバッグ対象アプリに接続すれば,対象コードによるコンソール出力を確認したり,デバッグ対象の環境内で Javascript コードをeval することが可能になる。DOM や CSS スタイルの参照,編集などもサポートされている。
Weinre に欠けているのは VM のサポートを必要とする機能,例えばブレークポイントの設定とキャッチ関連の機能やプロファイリングなどだ。

PhoneGap は GUI として HTML/Javascript を使用していながら,ローカル API へのアクセスが可能なアプリケーションを実現する,クロスプラットフォームなフレームワークである。モバイル Web デバッグを容易にすることの重要性 によって Weinre は現在,この PhoneGap プロジェクトの一部として取り込まれている。

JSConsole も Weinre と同種のツールだが,コンソール出力や eval に重点を置いている点が特徴である。JSConsole のサイトで ":listen" と入力すると,GUID のハードコードされた Javascript ソースを取得することができる。Web ページをデバッグするためにはこのコードが必要だ。ページのロード時にこのコードが JSConsole サーバに接続して,GUID によってセッションとユーザのオンラインセッションを関連づける。ブラウザはこれを利用して,デバッグ対象のページ上にある Javascript ランタイムとの接続を確立するのである。

iOS ユーザ用にも JSConsole アプリ あるいは Bugaboo など,Javascript ランタイムへのアクセスを補助するインストールアプリが提供されている。

将来:リモートデバッグ

このようなワークアラウンドを利用すれば,モバイルブラウザ上のJavascript コンテキストにリーチして,それを監視ないし操作することが可能だ – ある程度までは。しかし開発者は,デスクトップブラウザの種類豊富なブレークポイント (行ベース,例外,DOM 変更などをトリガとするもの) ,プロファイリングなどを備えた,もっと強力なツールを使い慣れている。

その解決策は,モバイルランタイムにデバッグ機能を配置して,リモートプロトコル 経由で利用することだ。

WebKit プロジェクトは 先日,リモートデバッグのサポートを発表した。ランタイム内部のデバッグ機能にネットワークプロトコル経由でアクセス可能とすることで,デバッグ GUI を別プロセスあるいは別マシンに配置できるようになる。同じような機能は他のブラウザや Javascript エンジンでもある程度実現されているが,今回の発表で重要なのは,IDE などサードパーティのデバッグ GUI が利用可能になる点だ。これによってユーザは,自身の作業環境からデバッガへ接続することができるようになる。Firefox でも現在,デバッグ機能にアクセスするプロトコルである CrossFire を開発中である。さらに Google V8 にもリモートデバッグプロトコルがあり,Cloud9 の Chrome と Node.js を対象とするデバッガなど,各種の IDE ですでに導入されている。ただし CrossFire と WebKit の新プロトコルが Javascript, DOM,CSS など広範囲の Web デバッグ機能のサポートを提供するのに対して,V8 プロトコルがサポートするのは Javascript 機能に限定されている。

モバイル Javascript ランタイムや HTML コンポーネントがこのようなリモートプロトコルをサポートするようになれば,デバッグサポートはデスクトップブラウザと同等なものになるはずだ。

それがどのような形になるかは,リモートプロトコルをすでにサポートしているプラットフォームを見れば分かる。一例は Blackberry の Playbook タブレットのリモートデバッグサポートだ。これには Webkit プロジェクトから,最新の WebInspector とリモートデバッグ機能が導入されている。

Opera のモバイルブラウザもまた,DragonFly デバッガ を使用したリモートデバッグをサポートしている。ただし Opera のモバイルブラウザには,フル機能ブラウザである Opera Mobile と,これとは別の Opera Mini がある。後者は基本的に,サーバでレンダリングされた HTML の表示とユーザイベントの転送を行うブラウザだ。

これらに続いて,iOS と Android のブラウザがリモートデバッグを実装する時期がいつになるのか,現時点では不明である。

今回取り上げなかったデバッグツールで,読者が利用中のものがあればコメントしてほしい。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT