HTML、CSS、JavaScriptのデバッガツール「Firebug」のインストール手順

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

Firebugの特徴

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

Firebugのインストール手順

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