HTML 開発

リアルタイムにソースを表示

Firefox は [ソースを表示] ウィンドウを備えていますが、JavaScript の実行後実際にどうなるかは表示されません。Firebug の [HTML] タブは実際の姿をリアルタイムに表示します。

加えて、右画面のタブが個々の要素のプロパティ ── スタイルを設定している CSS、位置とサイズを設定しているピクセル、JavaScript でアクセスできる DOM プロパティ、その他 ── の発見を容易にします。

変化を強調表示

JavaScript の組み込まれた Web サイトでは、HTML 要素が恒常的に作られ、削除され、変更されています。これらの変化がいつ、どこで、どう起こっているかを実際に見ることができたらいいなと思いませんか？

Firebug は HTML に変更が施されると、変更された箇所を即座に黄色く強調表示します。変更を見逃さないようもっと近くで見たいなら、変更が施される毎に変更された箇所にスクロールするオプションもあります。

HTML の即席編集

Firebug では、HTML に実験的な変更を施したり、その変更を即座に反映させたりといったことが楽しく、簡単にできます。あなたはクリックしたり、ひとつずつ次へタブ移動して、HTML の要素やテキストを作成、削除、あるいは編集できます。

もしあなたが小さな変更以上のことをしたいなら、Firebug でどんな要素でも HTML ソース全体を編集できます。要素を右クリックし、メニューから [HTML を編集] を選びましょう。

マウスで要素を検索

ときには思ったような表示にならず、その理由を知りたいこともあるでしょう。その答えを得るのに Firebug ツールバーの [調査] ボタンをクリックする以上に早い方法はありません。ページを見ている間、マウスカーソルの下にあるものは何でも、そこに隠された HTML や CSS が即座に Firebug に表示されます。

検索で見つかる

何を探しているかは判っていても、それがページには見あたらない、なんてこともあるでしょう。Firebug ツールバーのクイック検索ボックスを使うと、HTML ソースを検索することができます。その結果は文字入力と同時に強調表示されます。

調査、編集、再読込

HTML タブで何かの要素を調査するとき、あなたがページを再読み込みしても、Firebug は再読み込み後もその要素を (もしまだ存在していれば) 表示し続けます。これで、外部エディタで HTML を編集した後、Firefox に戻ってその HTML がどう表示されるかを手軽にテストできるようになります。

ソースをコピー

要素を右クリックすると、その要素の何をコピーするか ── HTML の断片、HTML プロパティの値、あるいはその要素固有の XPath 表現など ── のオプションが表示されます。