FireBugのインストールと簡単な使い方

昨日、FireBugが@ITで紹介されていたせいか、"FireBug"という検索キーワードでGoogleなどからこのブログにやってこられる方が急に増えました。
以前、紹介程度には書いていたんですが、わざわざ見に来てもらってそれだけでは申し訳ないので、導入から簡単な使い方までを書いておきます。

◆インストール
インストールはいたって簡単です。
Firefox 1.5以上でこちらのサイトにアクセスします。
そのページの真ん中より少し上に以下のような部分がありますので、「Install Now」をクリックます。


すると、以下のようなダイアログが出るので、「今すぐインストール」を押してインストールを行います。


ダウンロードが完了すると以下のダイアログが出ますので、FireBugの項目があることを確認してFirefoxを再起動して完了です。



◆簡単な使い方
Firefoxを起動すると、ステータスバーの右端に、ページにエラーがなければ の アイコンが、エラーがあると のような アイコンが表示されます。
そのアイコンをクリックすると、以下のようにデバッグ用のペインが開きますので真ん中の「Debugger」タブを開くと、そのページ内のJavaScriptのソースが表示されます。


外部ファイルなど複数存在する場合は、下にある「Scripts」というドロップダウンでファイルを選択してください。
ここで、左側の行数が書かれている部分をクリックすると、ブレイクポイントを設定できます。
デバッグしたい行にブレイクポイントを設定してJavaScriptを実行すると、以下のようにブレイクポイントでプログラムが中断します。黄色の行がこれから実行されるプログラムです。


この時、右側のペインではその時点での変数の値を確認することが出来ます。
ここで左下にある水色の再生ボタンを押すとプログラムが再度実行され、次のブレイクポイントがあればそこで再度中断となります。
また、ここから1行ずつプログラムを実行していくには、3つの黄色い矢印ボタンを使用します。
一番左はステップオーバーで、次の行へ進みます。
真ん中はステップインで、現在の行が関数の呼び出し部であればその関数内に入ります。
一番右はステップアウトで、現在の関数を抜けて外に出ます。

軽量でお手軽にデバッグ出来ますので、おすすめです。


IEでデバッグしたいという場合は、Visual Studio 2003とか2005をお使いの方は、それでデバッグ出来ます。
お持ちでない方は、Visual Web Developer 2005 Express EditionというVisual Stuio 2005のASP.NET開発に機能を限定したものが無料で入手出来ますので、こちらを使ってデバッグ出来ます。
軽量ではありませんし、プロジェクトの作成などが必要でお手軽というわけでもありませんが、機能は非常に充実していますので、ASP.NETとは無縁の方も一度お試し下さい。