Firebugでできること: HTML/CSSの解析とオンザフライ編集

HTML/CSSのソースをオンザフライ編集

　HTMLパネルおよびCSSパネルではウェブページの静的なデザインに関するデバッグが行える。具体的には次のような機能が用意されている。

• HTMLおよびCSSのソース解析
• HTML/CSSソースのオンザフライ編集
• CSSプロパティの有効化／無効化
• レイアウトの可視化

　例えば解析したいページでHTMLパネルを開くと、図1のようにHTMLのソースが表示される。ソース上にマウスカーソルを持っていくと、カーソルの当たっている要素がページ上で強調表示される。ソースの右側のウィンドウでは、選択した要素のスタイルやレイアウト、DOMオブジェクトを見ることができる。

図1 ウェブページのソースコードを解析して表示する

　Firebug左上の[調査]ボタンをONにすると、ページ上でマウスカーソルが当たっている要素のソースが図2のように強調表示されるようになる。

図2 ページ上のどの部分がソースコードのどの記述に該当するのかが一発で分かる

　ソース上の属性名や属性の値は、ダブルクリックすることで編集できる。編集した内容はオンザフライで表示に反映されるため、即座に結果を確認することが可能。要素名をダブルクリックするか、[編集]ボタンをクリックすると、エディタが開いてその要素のソースコードを直接編集することができる。Firebug 1.2以降では外部エディタを指定することもできるようになったため、使い慣れたエディタでの編集が可能である。

　その他、画像のパスやカラー指定にマウスカーソルを合わせると、ツールチップでプレビューが表示されるといった機能もある。CSSパネルではカーソルを合わせたプロパティの左側に図3のように通行止めの標識のようなアイコンが表示され、これをクリックするとそのプロパティを無効にすることができる。

図3 画像のプレビュー表示やCSSプロパティの無効化もサポート

　ソースの解析から修正、結果の確認まで、全ての作業がウェブブラウザ上のみで完結させられる点が大きな魅力だ。