Web制作者の必須ツール１ Firebug Add-ons for Firefox

Firebug：Add-ons for Firefox

Firefoxは正しいHTMLの認識をしてくれますが、それ以上に素晴らしい拡張機能がたくさんある事が魅力です。

特にFirebugはDOMやCSSの調査、パフォーマンス測定まで幅広く使えるWeb制作者必須のツールです。
このツールを使う為にもぜひFirefoxをインストールするべきです。

インストールしたら蜂のマークをクリックすると下方にHTMLのソースが表示されます。ソースを展開してポイントすると画面上のどこの表示であるかがハイライトされ、視覚的にとてもさがしやすいです。CSSが見られるだけでもIE使用者の私には便利だなーと感心しました。

〜FirebugでJavaScriptのデバッグをする〜
ジャバスクリプトを含むHTMLを作成する。
Firefoxで表示し、Firebugのメニュー⇒スクリプト に切り変える。
行番号をクリックすると、ブレイクポイントがセットされます。
右側のWatchタブにthis.xなど、監視したい編集名を入力します。（変数名 var X;）この値が変化することにより、変数の変化を監視する事ができます。
また、実行したときはブレイクポイントの上に黄色い矢印が点灯するの判断できます。
またまがった下矢印をクリックすると、次のブレイクポイントに進み変換を観察することができます。

〜その他の機能〜

＜パフォーマンスをチェックする＞
Firebugのメニュー⇒ネット⇒すべてを表示した状態で、ブラウザをリロードするとタイムラインが表示されます。タイムラインには呼び出されているリソースの取得までにかかった秒数（1000/1秒）が表示されるのでここでパフォーマンスのチェックを行う事ができます。時間のかかっている個所を修正しパフォーマンスUPに努めましょう。