Web制作のプロ必携の便利機能が満載

「Firebug」は、HTML、CSS、JavaScriptのデバッグなどのWeb制作を支援する機能を豊富に持っており、Webデザイナー、JavaScriptやAjaxの開発者などに愛用されています。

Firebugをインストールすると、デバッグの有効・無効を切り替えるアイコンがFirefoxに追加され、ワンクリックでFirebugのメニューを立ち上げられるようになります。特定のページを表示しながらFirebugを立ち上げると、そのページのHTMLを解析し、構造をわかりやすい形で確認できるようになります。同時に、ページ内の特定の要素（HTMLソース）に適用されているスタイル（CSSファイル）を確認することも可能です。

さらに、HTMLやCSSをその場で編集し、その結果を即時反映させることもできます。元のファイルを変更するわけではないので、編集結果のテスト機能として活用しましょう。

JavaScriptのデバッグ関連でも、生成されるHTMLソースをリアルタイムに確認できるほか、ソース内の任意の場所に監視用のブレークポイント（実行を中断する行）を設定したり、任意のコマンドを任意のタイミングで実行したりなど、プロユースでも満足できる豊富な機能を備えています。

●Firebug
http://addons.mozilla.org/ja/firefox/addon/1843

1.Firebugのメニューを表示する

ステータスバーの［Firebug］をクリック,チェックしたいページを表示しておく

2.ページ内の要素をチェックする

1 ［調査］をクリック,2 チェックしたいページ内の要素にマウスポインタを合わせる,Firebugのメニューが表示された,ここをクリックすると新しいウィンドウでメニューが表示される,その要素に該当するHTMLソースがハイライト表示された,その要素に適用されているスタイルが表示された

3.HTMLを編集する

1 編集したいページ内の要素をクリック,2 ［編集］をクリック,3 HTMLソースを編集,編集結果がページに反映された

4.CSSを編集する

1 ［調査］をクリック,2 編集したいページ内の要素をクリック,3 スタイルの属性または値をクリックして編集,ここをクリックするとスタイルが記述されているCSSファイルが表示される,編集結果がページに反映される

[ヒント]JavaScriptのデバッグをするには

FirebugでJavaScriptのデバッグを行うには、Firebugのメニューで［スクリプト］をクリックします。最初は［スクリプトパネルは停止しています］と表示されますが、［（ドメイン名）で選択された機能を有効にします］をクリックするとデバッグが可能になります。デバッグしたいファイルを選択すると、リストの確認や1ステップずつ動作させながらの挙動の確認などが行えます。

1 ［スクリプト］をクリック,2 ［（ドメイン名）で選択された機能を有効にします］をクリック,ここをクリックするとJavaScriptファイルを選択できる

[ヒント]各ファイルの読み込み時間を計測できる

Webページの表示が遅くて訪問者のストレスになっていないか、読み込み時間を計測してみましょう。［接続］をクリックし、［スクリプト］と同様に機能を有効にすると計測されます。HTMLや画像など、各ファイルとトータルの時間をミリ秒単位でチェック可能です。