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や画像など、各ファイルとトータルの時間をミリ秒単位でチェック可能です。