Ajax 最強のデバッグツール"FireBug 1.0"

　
　Firebugの最新版となるFirebug 1.0が公開された。Firefoxのエクステンション自動アップデート機能ですでに1.0にアップデートしたデベロッパも多いだろう。1.0が公開されたこの機会に、デベロッパに人気の高いFirebugエクステンションを紹介したい。
　
　
　Firebugとは
　
　FirebugはFirefoxエクステンションのひとつ。Firefoxで閲覧しているページの内容を分析し、編集、デバック、モニタリングなどを実施することができる。HTML、JavaScript、CSSなどページを構成している要素に対して編集やモニタリング、デバッグを実施することができ、扱いやすさからAjax Webアプリケーションの開発やシンプルなHTMLページの作成においても重要なツールとみられている。
　
　
　Firebugは「Mozilla」→「Firefox Add-ons」→「Firebug」から「Install now」を選択してインストールするか、Firebugのホームページ( http://www.getfirebug.com/ )から「INSTALL FIREBUG 1.0 FOR FIREFOX」を選択してインストールすればいい。エクステンションインストールの手順はほかのエクステンションと同じだ。
　
　
　Firebugは最初の状態では有効になっていないので、メニューから[View]→[Firebug]を選択して表示させるか、F12キーを押して表示される。別ウィンドウで表示させたければCtrl + F12を押せばいいし、ツールバー用のアイコンが用意されているのでこちらを追加して使ってもいい。最初に表示させるとFirebugを有効にするかどうか尋ねてくるので、「有効にする」を選択する。
　
　
　Firebugの機能で最も理解しやすいのはインスペクトビュー機能だろう。Inspectボタンを押してからページにマウスを持っていくと、要素ごとに選択が実施され、対応するHTML要素も呼応して表示される。HTML内容の編集もその場で実施でき、即時ビューに反映される。HTMLデザインのチェックをする上で便利な機能だ。
　
　
　1.0ではとくにCSS系の機能の向上がめざましい。CSSの内容をリアルタイムに編集できるようになったほか、編集も↑↓キーに便利なショートカットが設定されるなど、細かい部分での使い勝手の向上も目をみはるものがある。
　
　
　レイアウト機能もかなり便利だ。右下の画面をレイアウト表示にして、マウスをレイアウトの上に持っておくと対応する部分がページビューに表示されるようになる。ルーラも表示されるなどかなり本格的だ。もちろんレイアウトで表示している数値もリアルタイムに編集して表示の変更を試すことができる。
　
　
　Firebugでは静的にページを解析するだけではなく、ページの読み込みに対して動的な解析も実施できる。ページロードにおいてボトルネックになっている部分を簡単に解析できるほか、HTTP/XMLHttpRequestにおいてやりとりされている内容も簡単に解析できるためWebアプリケーションのデバッグにも便利。
　
　
　Firebugの最大の特徴はJavaScriptのデバッグ機能だ。これら機能の強化も実施されている。ブレークポントに条件が指定できるほか、変数のモニタリング、1行づつ指定してのステップ実行などは特に便利な機能といえる。この機能を使いたいためにFirebugをインストールしているというデベロッパも多いだろう。
　
　
　HTML、CSS、DOMがリアルタイムに簡単に変更できるようになり、結果が即時Firefoxに反映されるようになった点が高く評価できる。従来の0.4.1ではそのあたりの機能は弱かったため、別途エクステンションをインストールして併用していたたデベロッパも多かったはずだ。1.0からは JavaScriptのコーディングチェックにもWebデザインチェックにもFirebug 1.0を活用できるので、Webデザイナーにも常用ツールとしてお勧めできるエクステンションになったといえそうだ。
　
　
　まだFirebugを使ったことがないというデベロッパやWebデザイナーは、よい機会なのでぜひ一度触れてみてほしい。気に入る機能がどれかひとつは見つかるのではないかと思う。