通常ブラウザにはF12押下でブラウザ標準の開発ツールが使用可能となりますが、今回紹介する「Firebug」は高性能なJavaScriptデバッガツールです。JavaScriptだけではなくHTMLやスタイルシートの値をリアルタイムに変更して確認したり、非同期通信状況やDOMの状態などの詳細情報確認も簡単に可能となります。

Firebugの特徴

• Firefox専用のアドオン
• JavaScriptのデバッグ
• 非同期通信の状況確認
• DOMやスタイルシートの設定状況確認

Firebugのインストール手順

1. FireFoxを起動し、メニューの「ツール」→「アドオン」を選択します。
   
2. アドオンマネージャのメニュー「アドオン入手」画面で検索ボックスへ「firebug」と入力して検索します。
   
3. 検索結果に「Firebug x.xx.x」と表示されますので「インストール」ボタンを押下してインストールします。
   
4. インストール終了後、デバッグしたい画面を開いてブラウザの右上に追加された「虫アイコン」をクリックすれば虫アイコンに色がついてFirebugが起動します。