Webのバグを燃やしまくるFirebugと、そのアドオン7選：ユカイ、ツーカイ、カイハツ環境！（10）（3/3 ページ）

■【3】JavaScriptをハイライティング「FireRainbow」

　FireRainbowは、JavaScriptをハイライティングするアドオンです。Firebugの中で表示するJavaScriptが見やすくなります（図13）。

図13　FireRainbowによりハイライティングされたJavaScript

■【4】HTMLタグのヘルプ機能を追加する「CodeBurner」

　CodeBurnerは、HTMLタグ（要素）のヘルプ機能を追加するアドオンです。CodeBurnerを追加すると、HTMLを表示する際に、右のペインに［Code Example］タブが表示され、左のペインでHTMLのタグや属性を選択すると、タグや属性の解説とサンプルコードが表示されます（図14）。

図14　タグのヘルプ表示（コード例）

　また、タグを選択した状態で、［リファレンス］タブを選択すると、選択したタグの詳細なヘルプが表示されます（図15）。

図15　タグのヘルプ表示（リファレンス）

　これらの機能は、HTMLタグをうろ覚えの場合に役に立ちます。

■【5】jQueryのデバッギング機能を追加「FireQuery」

　FireQueryは、JavaScriptフレームワークのスタンダード的な存在であるjQueryを利用しているWebアプリケーションのデバッグを支援するアドオンです。コンソール上でjQueryのセレクタを利用して表示したHTMLタグの位置を確認できます。

図16　FireQueryで表示したセレクタのマッチング結果をプレビュー

　FireQueryは、jQueryのデバッグしかサポートしていませんが、prototype.jsなど、ほかのJavaScriptフレームワークを利用している場合、FireFinderが役立ちます。

■【6】XPathにマッチするタグを表示「FireFinder」

　FireFinderは、XPathを利用したHTMLタグの検索結果を表示するアドオンです。prototype.jsやjQueryなどのJavaScriptフレームワークでは、XPathを利用したHTMLタグのマッチングを行う機能がありますが、FireFinderを利用すると、マッチングしたタグとともに視角的に確認できるので、XPathを利用したコーディングやデバッグに便利です。

図17　FireFinderによるXPathのマッチング結果

■【7】Webサイトの表示速度を計測「YSlow」

　YSlowは米ヤフーの提供するアドオンで、Webサイトの表示速度を計測して問題点を表示します。詳細は下記記事が詳しいので、ご参照ください。

自分でアドオンを作ってカスタマイズも

　今回は、Webアプリケーションのデバッグを効率化するFirefoxのアドオンであるFirebugと、その機能を拡張する7つのアドオンを紹介しました。WebアプリケーションのJavaScriptやスタイルのデバッグに苦しんでいる方は、一度Firebugを利用することをお勧めします。

　またFirebugをすでに利用している場合でも、今回紹介したほかのアドオンと組み合わせると、さらに効率良くデバッグできるようになると思います。

　またFirebugとFirefoxは、ともにオープンソースで提供されているので、ユーザーがFirebugを拡張するアドオンを作成することにより、カスタマイズして利用することも可能です。興味がある方は、ぜひアドオンの開発にも挑戦してみてください。