FirebugによるWebコードのデバッグ：Firefox Hacks（2/2 ページ）

[Mayank-Sharma，Open Tech Press]

目に見えないAjaxトラフィックの調査とデバッグ

　Firebugは、CSS編集のための便利なビジュアルリファレンスになるだけでなく、Ajaxを利用した複雑なWebページにも対応している。AjaxのXMLHttpRequest（XHR）オブジェクトは、GmailのようなAjaxアプリケーションの重要な部分である。このオブジェクトは、ページの更新のためにWebサーバからデータを取得するのに使われる。「Show XMLHttpRequests」オプションが有効になっている場合、「Console」タブにすべてのXHRリクエストが表示される。これらを展開すると、サーバから受け取った応答とともにヘッダ情報が表示される。

　「Net」というタブもあるが、ここにはページに読み込まれるファイルが（HTML、CSS、JavaScript、Flash、画像のいずれであっても）リアルタイムで表示される。このタブは、ページの読み込みにかかる時間の確認と最適化を行うのに適している。要求されている要素群のプレビューができ、それらのサイズと読み込み先のシーケンスも確認できるからだ。

　Firebugには、関数ごとに詳細なリポートを提供してくれるJavaScriptプロファイラも用意されている。関数の切り替えは、手動、またはJavaScriptからオートプロファイリングの機能をマークすることで行える。また、このプロファイラは、関数がいつ呼び出され、どんなパラメータが渡されたかを記録している。

　また、ブレークポイントの設定により、JavaScriptの実行を任意の行で一時停止させることができる。ブレークポイントは特定の1行をクリックすることで設定でき、ある条件が満たされたときに限って実行を停止する条件付きブレークポイントの設定も可能だ。ブレークポイントにヒットした後は1行ずつステップ実行を行い、プログラムの状態がどのように変化するかをリアルタイムに分析できる。

　関数のテストは、コマンドラインに関数名をペーストするだけで行える。また、Firebugではコードのセグメントを取り出して1行に圧縮できるが、これはブックマークレットの作成に役立つ。

まとめ

　Firebugは、Web開発を仕事にしている人にもたまにしか行わない人にも恩恵をもたらす。最大の利点は、Firebug内のほぼすべてのものがハイパーリンクになっている点だろう。例えば、プロファイラなど関数が表示されているところならどこででも、関数名をクリックしてソースコード内の該当カ所にジャンプしたり、HTML要素をクリックしてそのスタイルを確認できるのだ。

　FirebugはプロのWeb開発者の間で人気があるが、彼らの多くはβ版のころから利用している。Firebugのデザインは直観的に分かりやすいが、本業ではなく趣味でWeb開発に携わる人には、すべての項目の場所や特定のボタンの機能が説明されている数点のドキュメントが役に立つだろう。

原文へのリンク