Firebugの使い方 - HTML/CSS/DOM

HTML/CSS/DOMパネルではおもに次の操作が実行できる。

  • HTMLインスペクタ
  • HTML/CSS/DOMソースの解析、およびオンザフライ編集
  • 要素内CSSプロパティ単位の無効/有効切り替え
  • offset、margin、border、paddingの視覚化

各種ソースをオンザフライで編集できる点が魅力的だ。Webブラウザとエディタをいったりきたりしながらデザインの調節をおこなわなくとも、直接操作してデザインを確認することができる。

HTML/CSS/DOMソースを編集した場合、その場で画面に反映される

HTML/CSSパネルでは画像パスやRGB色指定にカーソルを乗せると、ツールチップでプレビューが表示される

Firebugの使い方 - Script

Scriptパネルではおもに次の操作が実行できる。

  • JavaScriptコード中にブレークポイントの設定
  • JavaScriptのステップ実行、ステップイン/ステップアウト
  • 任意の式の監視

ブレークポイントを設定しておくと、JavaScript動作中に一時停止される。その時点で各種変数がどうなっているかを確認できる。またブレークする条件も指定することが可能だ

JavaScript中でバグが発生してしまった場合は、該当行の前後にブレークポイントを設定し、渡している引数や変数の中身を今一度チェックする。