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

複雑に絡み合ったWebサイトの開発において、Firebugを使えば、CSSおよびJavaScriptの単純なテンプレートから複雑なAjaxアプリケーションに至るまでのすべての編集とデバッグを行うことができる。

[Mayank-Sharma，Open Tech Press]

　Webサイトの開発は、世紀の変わり目となった7年前のころほど単純な作業ではない。新たなツール、テクノロジー、開発方法論のはんらんにより、もはやWebページはかつての単純なHTMLコードの列ではなく、各種のスタイルシート、マークアップ言語、スクリプトが複雑に入り混じったものになっている。だが、こうした複雑なブレンドものをデバッグするのは容易ではない。そこで登場するのが、WebブラウザFirefox用のオープンソースのアドオンFirebugだ。このアドオンを使えば、CSSおよびJavaScriptの単純なテンプレートから複雑なAjaxアプリケーションに至るまでのすべての編集とデバッグを行うことができる。

　各種Webプロジェクトの作成とデバッグに携わるWeb開発者を支援するアプリケーションは、幾つか存在する。SANIsoftの最高技術責任者で『Professional PHP4 Programming』の共著者でもあるタリク・サニ博士は、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

　Firebugは、ツリービュー形式でコードを表示する。コードから特定の要素を探し出す場合は、検索バーを使うと1文字入力するたびにコード中のマッチ部分が強調表示される。コードのある要素を選択すると、具体的にそれに当てはまるCSSスタイルと、実行部から流用できるスタイルが表示される。また、ワンクリックで任意のスタイル特性を無効にでき、その結果はページ上に自動的に反映される。「Layout」タブには、ルーラとガイドラインが表示され、各要素を簡単に配置できるようになっている。

　Firebugには、スナップ上でCSSプロパティの値を確認できる機能もある。マウスカーソルをHTMLのカラータグの上に置くとその色を示すパッチが、また画像リンクの上に置くとその画像が実際のサイズで表示される。

　カーソルキーを使えば、特定の要素に対して設定可能なすべてのCSSプロパティを順に切り替えられるが、これはCSS初心者にはありがたい機能だ。Firebugは標準的なCSSキーワードの一覧を保持しており、これらは要素名を入力する際の自動補完に利用されている。

　ブログを運営しているが毎日HTMLやCSSをいじるわけではない場合、自作ページのテーマのカスタマイズには手が出せないかもしれない。だが、Firebugを使えば、デフォルトのテーマを読み込み、「Inspect」ボタンをクリックして、ページ上でマウスを動かすだけで済む。すると自動的に、カーソルの置かれたページのセクションを生成するHTMLコードにジャンプする。このコードでは、ポイントする要素の種類に応じて、その要素のボーダー、マージン、パディングがすべてページ上で強調表示される。例えば、図に示すように、最近のエントリのリストアイテム（<li id="recent-entries">）の上にマウスカーソルを置くと、このHTMLによって制御されているページの部分が強調表示される。また、右側の「Style」パネルには、このリストアイテムに適用されたCSSスタイルが表示されている。