Google Chromeの開発ツールは実務に耐えうる：Firebugなみの性能を発揮

　先日ベータ版が公開されたGoogleオリジナルのブラウザ「Google Chrome」。「無駄を削ぎ必要な機能のみを追求した」というのが謳い文句だが、その一方でウェブ開発者向けの機能が充実している点も見逃せないポイントだ。

高機能なJavaScriptコンソール

　Google Chromeはウェブ開発者向けの機能として、デフォルトでJavaScriptコンソールとJavaScriptデバッガが付属している。特にJavaScriptコンソールの方は、Firefoxのアドオンとして著名なFirebugに劣らない高機能さであり、実務でも十分に使えそうだ。

　ChromeのJavaScriptコンソールおよびJavaScriptデバッガは、［開発/管理］メニューから起動できる（図1）。

図1 Google Chromeの開発ツールは［開発/管理］メニューから起動

　図2はZDNet Japanのトップページを表示させた際の、JavaScriptコンソールの表示である。

図2 Google ChromeのJavaScriptコンソールの表示例

　［Elements］メニューではHTMLのエレメントが階層構造で表示され、［Resources］メニューではリソースの情報が表示される。何らかのエラーが発生している場合には下部のフレームにその情報が表示される。Safariに付属する開発ツールのエラーコンソールとよく似ているが、これはGoogle ChromeがWebKitをベースとしているからだろう。

　ソース中のエレメントにマウスカーソルを合わせると、ブラウザに表示されたページ内の該当のコンテンツが強調表示される。図3ではナビゲーションメニューを強調表示させた様子を示す。

図3 ソース中から選んだコンテンツを強調表示

　エラーに表示されたリンクをクリックすると、Resourcesメニューに移動しソース中の該当箇所とエラーの原因を示してくれる。図4では<a>の閉じタグが余分だと言われているようだ。

図4 リンクのクリックでエラーの該当箇所にアクセス可能

　Resourceメニューでは、リソースのロードに関するタイムラインを表示することができる（図5）。これを見れば各リソースのロードにかかる時間が一目瞭然であり、ボトルネックの発見に役立つだろう。

図5 リソース・ロードのタイムラインを表示

　どうやらHTMLのデバッグに関しては全く問題なく使えそうである。では次に、JavaScriptデバッガの方を見てみよう。

コマンドベースのJavaScriptデバッガ