各種Webプロジェクトの作成とデバッグに携わるWeb開発者を支援するアプリケーションは、いくつか存在する。SANIsoftの最高技術責任者で『Professional PHP4 Programming』の共著者でもあるTarique Sani博士は、DOM Inspector、Venkman JavaScript Debugger、LiveHTTPHeaders、「Web Developer」ツールバーの機能群の名を挙げている。「Firebugが出るまでは、こうしたツールの寄せ集めで間に合わせなければならなかった。Firebugのおかげで必要なすべてのツールが使いやすい1つのインタフェースにまとまり、ずいぶん楽になったよ」
拡張機能であるFirebugをダウンロードすると、Firefoxが自動的にそのインストールを行ってくれる。Firebugを有効にするには、Firefoxのステータスバーの右隅にあるFirebugのアイコンをクリックする。有効にするとすぐに、訪れるすべてのWebページをFirebugを使って解析できるようになるが、この動作はカスタマイズも可能だ。
ブラウザ上に複数のタブがある場合、Firebugはそれぞれのタブに別々のセッションを起動する。これは、1つのWebブラウザで複数のWebページを編集できることを意味する。デフォルトでは、Firebugアイコンをクリックするとページ最下部の小さなパネルにFirebugコンソールが表示されるようになっている。大画面のモニタであれば、別ウィンドウでFirebugを開くこともできる。
コードの閲覧とCSSのハックが容易
Firebugにはタブ形式のシンプルなレイアウトが採用され、そこにHTML、CSS、JavaScript、DOM、ネットワーク処理といったWebページ中のさまざまなコンポーネントや特性が表示される。
Firebugは、ツリービュー形式でコードを表示する。コードから特定の要素を探し出す場合は、検索バーを使うと1文字入力するたびにコード中のマッチ部分が強調表示される。コードのある要素を選択すると、具体的にそれにあてはまるCSSスタイルと、実行部から流用できるスタイルをFirebugが表示してくれる。また、ワンクリックで任意のスタイル特性を無効にすることができ、その結果はページ上に自動的に反映される。「Layout」タブには、ルーラとガイドラインが表示され、各要素を簡単に配置できるようになっている。
Firebugには、スナップ上でCSSプロパティの値を確認できる機能もある。マウスカーソルをHTMLのカラータグの上に置くとその色を示すパッチが、また画像リンクの上に置くとその画像が実際のサイズで表示される。
カーソルキーを使えば、特定の要素に対して設定可能なすべてのCSSプロパティを順に切り換えることができるが、これはCSS初心者にはありがたい機能だ。Firebugは標準的なCSSキーワードの一覧を保持しており、これらは要素名を入力する際の自動補完に利用されている。
|
| クリックで拡大 |
ブログを運営しているが毎日HTMLやCSSをいじるわけではない場合、自作ページのテーマのカスタマイズには手が出せないかもしれない。だが、Firebugを使えば、デフォルトのテーマを読み込み、「Inspect」ボタンをクリックして、ページ上でマウスを動かすだけで済む。すると自動的に、カーソルの置かれたページのセクションを生成するHTMLコードにジャンプする。このコードでは、ポイントする要素の種類に応じて、その要素のボーダー、マージン、パディングがすべてページ上で強調表示される。例えば、図に示すように、最近のエントリのリストアイテム（<li id="recent-entries">）の上にマウスカーソルを置くと、このHTMLによって制御されているページの部分がFirebugによって強調表示される。また、右側の「Style」パネルには、このリストアイテムに適用されたCSSスタイルが表示されている。
目に見えない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開発に携わる人には、すべての項目の場所や特定のボタンの機能が説明されている数点のドキュメントが役に立つだろう。