FirefoxでFirebugを使ってWebページをデバッグする

私たちの評決

Web デザイナーであっても、JavaScript プログラマーであっても、Firebug は Web サイトのデバッグに役立つツールを提供します。

私のようなWeb開発者にとって、最も気になる疑問の一つは「なぜページがこのように表示されるのか？」です。FirebugはFirefoxの無料アドオンで、この疑問に非常に迅速かつ詳細に答えてくれます。160万人以上のユーザーを抱え、1,144件のユーザーレビューで平均5つ星の評価を得ているFirebug 1.8.4は、特に価格（無料）を考慮すると、Web開発に必須のユーティリティです。

ブラウザウィンドウに表示されるページは通常、HTML、CSS、JavaScript の組み合わせです。Firebug はこれらの各コンポーネントの検査機能を備えているため、特定の画像が（通常は CSS の）本来あるべき場所に表示されない理由や、JavaScript アニメーションが実行されない理由を正確に把握できます。

JavaScript をデバッグする場合、Firebug を使用すると、コードにブレークポイントを設定したり、変数値を検査したり、関数をステップ実行したり、最新のデバッガーに期待されるその他のすべての操作を実行できます。

ChromeやOperaなどの最新ブラウザには、Firebugによく似た組み込み開発ツールが搭載されていますが、Firebugが最初に登場したのは間違いなくFirebugです。Firebugは2006年に開発され、Google ChromeやOpera Dragonfly（Operaの開発ツール）が登場する約2年前に遡ります。FirebugのLite版はIE6以降、Opera、Safari、Chromeのブックマークレットとして利用可能ですが、フルバージョンはFirefox専用です。

Firebug を使い始めるのは簡単です。プロの Web 開発者でなくても大丈夫です。ページ上の任意の場所を右クリックし、コンテキストメニューから「要素の検査」を選択するだけです。Firebug がウィンドウの下半分にポップアップ表示され、クリックした要素の詳細が表示されます。Firebug ペインを切り離してスタンドアロンウィンドウにすることもできます。複数のモニターを使用している場合に非常に便利です。自分のページだけでなく、Web 上のあらゆるページを検査できます。そのため、Firebug は非常に優れた教育ツールになります。まるで「ソースの表示」を強力にしたようなツールです。

CSS（カスケーディング・スタイル・シート）を使った作業を多く行っていた頃、Firebugは欠かせない存在でした。ページ上の特定の要素がなぜその場所に表示されるのか、あるいはあるウェブサイトがCSS3を使ってどのように美しい視覚効果を実現しているのかを理解するのは、必ずしも容易ではありません。Firebugを使えば、各要素にどのようなCSSルールが適用され、そのルールがどこから来ているのかを知ることができます。さまざまなルールをテストするには、Firebugに入力するだけで、ページにどのように影響するかを即座に確認できます。CSSエディタに入力して保存、アップロード、そして更新する必要はありません。Firebugには、CSSの自動補完機能や、矢印キーを使った値の増分・減分といった便利な機能も備わっています。Firebugは学習ツールとしても優れており、単調な説明を読むだけでなく、各CSSルールの意味をページ上で直接確認できます。

Firebug は非常に大規模であるため、独自のアドオンも存在します。そう、アドオンのためのアドオンです。オプションの Firebug パネルには、HTML および CSS リファレンス資料で Firebug を拡張できる CodeBurner や、CSS セレクタや XPath 式をさまざまなページ要素にマッチングさせる FireFinder などがあります。これらは、Mozilla アドオンサイトで利用できる無数の Firebug アドオンのうちのほんの 2 つにすぎません。

日常のブラウジングには Chrome を使用していますが、Web ページの開発やデバッグが必要なときは、Firebug のおかげで Firefox に戻ってしまいます。

注:リンクをクリックすると getfirebug.com に移動し、Firefox ブラウザにアドオンを直接インストールできます。

–エレズ・ズッカーマン