続・先取り! Google Chrome Extensions

第6回 Firebug要らずなChromeのWeb Inspector

この記事を読むのに必要な時間:およそ 3 分

Timelineパネル

Timelineパネルは,読み込み時間,スクリプトの実行時間,レンダリングの処理時間を総合的に計測できます。ウィンドウ左下の黒丸をクリックすると黒丸は赤色に変化し,計測状態に入ります。その状態でページをリロードしたり,イベントが設定されたボタンなどをクリックすると,それぞれの処理時間が計測され,タイムラインとして表示されます。

図6 タイムラインの分析

図6 タイムラインの分析

図6はXMLHttpRequestを行ってHTMLを取得して,そのHTMLを切り取ってページに挿入する処理をした際のタイムラインです。レスポンス待ちに時間がかかっているのが一目瞭然です(といっても,50ms程度ですが)⁠そのほかにもEventの起きているタイミングや,レンダリングのタイミングとそのレンダリングにかかる時間を詳細に把握できます。これらをチェックすれば,多少複雑になったアプリでもボトルネックとその改善方法を簡単に把握できます。

Profilesパネル

ProfilesパネルはJavaScriptの処理にかかった時間をTimelineよりも細かく計測できます。使い方はTimelineと同様で,左下の黒丸をクリックすると計測開始,もう一度クリックすると計測終了です(なお,Firebugと同じくconsole.profile/console.profileEndというコンソール関数は用意されていますが,こちらの関数は今のところ動作しないようです)⁠

また,黒丸の隣の目のアイコンはメモリの使用状態をチェックするツールです。クリックするとその瞬間にJavaScriptが使用しているメモリのサイズを表示します。複数回計測すると,前回からの増減も表示してくれます。これでメモリリークの原因の把握や対処などを行えます。

図7 メモリ使用状況の分析

図7 メモリ使用状況の分析

ただし,レポートされた部分と実際のコードを関連付ける作業は簡単にはいかないようです。無名関数を使わずに使い捨ての関数でも名前を付けるようにすれば,ある程度は把握しやすくなりますが,実際にどう修正すればメモリの消費量が減って,処理が高速化されるかはやはり地道に検証するしかありません。

Storageパネル

StorageパネルはWeb Storage(localStorage)⁠Web SQL Database,Cookieに保存されている値を表示できます。localStorageは値の編集と削除が可能で,Cookieは値の削除のみ可能です。Web SQL Databaseは(現時点では)表示のみですが,コマンドラインでSQLを発行することが可能です。

図8 ストレージパネル

図8 ストレージパネル

Consoleパネル

Consoleパネルはdev版でしか使えませんが,JavaScriptコンソール自体は先述の通り,ウィンドウ左下のアイコンで表示できます。JavaScriptコンソールではオートコンプリートが働くほか,いくつかのコンソール関数とコンソール変数が利用できます。

inspect関数は引数を適切なパネルで表示します。ノードを渡せばElementsパネル,DBやlocalStorageを渡せばStorageパネルを表示します。

copy関数は(ノードを渡した場合はシリアライズした)文字列をクリップボードにセットします。ちょっとしたワンライナーをコンソールで書いて,結果をクリップボードに入れるといったことができます。

そのほか,Firebugと同じく$0,$1で以前のノードを参照したり,$関数や$$関数(CSSセレクタによる要素取得)⁠$x関数(XPathによる要素取得)なども定義されています。このあたりは服部慶士さんの功績によるものですSurfin’ Safari - Blog Archive ≫ Web Inspector Redesign)⁠

まとめ

以上のように,ChromeのWeb Inspectorは使いこなせばFirebug以上に強力なデバッグツールになります。惜しむらくは右クリックに機能が割り当てられていない,コンソールが1行で固定なので,Firebugのように簡易エディタとしては使いにくい点などの些細な問題はありますが,十分に実用できる状態です。Web InspectorでGoogle Chrome拡張や高機能なウェブアプリを開発してみてはいかがでしょうか?

次回は拡張開発の実践編に戻ります。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/