Firebugの使い方 - Firebug 1.2の変更点

Firebugでは次のパネルが用意されている。

  • Console: 各種エラー、ワーニングの表示、JavaScriptのコードをオンザフライで実行、各種ロギング・スタックトレースなどを設定可能
  • HTML: HTMLソースの解析、編集、およびレイアウトの確認
  • CSS: スタイルシートの解析、編集、プロパティ単位での有効無効を切替
  • Script: JavaScriptの解析、ブレークポイントを設定しての実行、変数やオブジェクトの監視
  • DOM: DOMの解析、編集
  • Net: 各種リクエストヘッダ・レスポンス内容・タイムラインの表示、XHRのモニタリング

Mozilla Foundation, JavaScript EvangelistのJohn Resig氏のブログによると、Console/Script/Netを使用するとFirefox全体のパフォーマンスが低下してしまう結果が出たとのこと。そのためFirebug 1.2では、Console/Script/Netの3機能はデフォルトで無効化されるようになった。有効にするためには、次の2つのうちどちらかの操作をおこなう。

  • デバッグをおこないたいサイトにアクセスしFirebugを表示、初回サイト訪問時に表示される設定画面で有効にしたい機能を選択し、「Enable selected panels for *」をクリックする。
  • タブのコンテキストメニューから「Enabled」または「Enabled console/debugger/monitor for *」を選択する。

Console/Script/Netパネル選択時に表示される設定画面。ここで設定した内容は、サイト別に保存される

Console/Script/Netパネルのコンテキストメニューから、「Enabled」または「Enabled console/debugger/monitor for *」を選択することでも利用可能に

コンテキストメニューから「Enabled」を選択した場合は、閲覧するすべてのサイトで該当の機能が有効になってしまう。Firefox全体のパフォーマンスも低下するため、必要な場面でのみ有効にしたほうがいいだろう。

ステータスバーのFirebugアイコンにカーソルを乗せると、現在開いているWebページのうちFirebugが有効になっているサイトのアドレスがツールチップで表示される。またコンテキストメニューからサスペンドもおこなえる

このほか、HTML/CSSの編集時に外部エディタを指定できるようになった。あらかじめ外部エディタのパスを定義しておくことで、Firebug付属のエディタではなく普段使いなれているエディタを使用できる。

あらかじめ外部エディタを定義しておくことで、HTML/CSS編集時に任意のエディタを使用できるようになる