ウェブ開発者必須のデバッグツール「Firebug」

Firebug 1.2以降ではいくつかの機能がデフォルトで無効に

builderの読者であれば、Firebugについてはすでにご存知の方も多いだろう。FirebugはFirefoxで表示しているHTMLやCSS、JavaScriptに対して、編集やデバッグ、モニタリングを行うことができるアドオンである。強力なデバッグ機能を有することから、Firefoxを使うウェブ開発者にとっては必須のアドオンとも言われている。

本稿執筆時点での最新版はFirebug 1.2.1である。インストール直後は図1のようにFirebugそのものが無効化されているため、手動で有効にした上でFirefoxを再起動する必要がある。

図1 インストール直後は無効化されている

Firebugが有効になっていると、ステータスバーに2のように虫のアイコンが表示される。デバッグしたいウェブページを表示した状態でこのアイコンをクリックすれば、図3のようにデバッグ用のパネルが表示される。

図2 Firebugはバグにちなんだ虫のアイコン

図3 デバッグ用の6つのパネル

Firebugには「コンソール（Console）」「HTML」「CSS」「スクリプト（Script）」「DOM」「接続（Net）」という6つのパネルが用意されている（カッコ内は英語版の表示）。バージョン1.2以降で注意しなければならないのは、このうちコンソールとスクリプト、接続の3つはデフォルトで無効にされているという点だ。これはこの3つの機能を有効にしていると、Firefox全体のパフォーマンスが低下してしまうという結果が出たためだという。

これを有効にするためには、デバッグしたいサイトを訪問して3つのタブのいずれかをクリックし、表示される図4の設定画面で有効化したいパネルを選択して[機能を有効にする]のボタンをクリックする。この設定はサイト毎に適用される。

図4 コンソール、スクリプト、接続の3つの機能を使うには手動で有効にしなければならない

全てのサイトで有効にしておきたい場合には、タブのコンテキストメニューから[動作中]を選択する。ただし、これだとデバッグの必要がないページでもパフォーマンスが低下してしまうので注意が必要だ。

図5 全てのサイトで有効にすることもできるが、パフォーマンス低下に注意