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

杉山貴章(オングス)
2008-11-05 17:00:00
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

図2 Firebugはバグにちなんだ虫のアイコン 図2 Firebugはバグにちなんだ虫のアイコン
図3 デバッグ用の6つのパネル 図3 デバッグ用の6つのパネル

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

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

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

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

図5 全てのサイトで有効にすることもできるが、パフォーマンス低下に注意 図5 全てのサイトで有効にすることもできるが、パフォーマンス低下に注意
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]