ユカイ、ツーカイ、カイハツ環境！（10）

Webのバグを燃やしまくるFirebugと、そのアドオン7選

岡本 隆史
2009/12/3

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

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

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

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

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

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

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

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

　これらの機能は、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を拡張するアドオンを作成することにより、カスタマイズして利用することも可能です。興味がある方は、ぜひアドオンの開発にも挑戦してみてください。

■ ＠IT関連記事

JavaScript開発ツールの本命！ FirebugとAptana どこまでできる？ 無料ツールでWebサイト作成（4）　JavaScript／Ajax開発で“使える”無料ツールはあるの？ そんな疑問を持つ人にはFirebugやAptanaがオススメです 「リッチクライアント ＆ 帳票」フォーラム 2007/11/16

FireBugで探索アルゴリズムを見ていこう コーディングに役立つ！ アルゴリズムの基本（6）　探索のアルゴリズムを理解するためにコードをデバッガで見ていこう。計算量による効果予測にも触れる 「Coding Edge」フォーラム 2009/1/7

FirebugでRESTfulなDBアプリに挑戦!! DB2でさくさく実現するRESTfulなDBアプリ（3）　Web開発者にはおなじみのFirebugを使って、RESTによるDB操作を確認。CRUD操作それぞれを手を動かして体験しよう 「Database Expert」フォーラム 2009/1/5

ブラウザの設定を初期化させるCSSとチェックツール いまさら聞けないCSS／スタイルシート入門（3）　Webブラウザにあらかじめ設定されているスタイルの初期化とボックスモデル、状態を確認するツールとしてFirebugを説明する デザインハック ＜ リッチクライアント 2008/11/14

快適なWeb開発環境を構築する、Firefoxアドオン10選 エンジニアがお薦めする 現場で使えるツール10選（2）　Firefoxの魅力といえば拡張機能。Web開発の作業効率を上げるために、筆者が愛用しているアドオンを10個紹介する 自分戦略研究所 > スキル創造研究室 2009/3/9

プラグインで、Webブラウザをもっといろいろできる子に 本音のWebサービスガイド（2）　ネット生活をもっと便利に楽しくするWebブラウザ「超」入門。まずは、Firefoxのプラグインの使い勝手を紹介。4人のご意見番のお気に入りは？ デザインハック ＜ リッチクライアント 2008/9/4

1-2-3

Index

第10回　Webのバグを燃やしまくるFirebugと、そのアドオン7選   Page1 高度化するWebのデバッグに悩む人、必見！ バグを燃やせ！ 「Firebug」超入門   Page2 Firebugを拡張する7つで、バグを燃やしまくれ！ Page3 自分でアドオンを作ってカスタマイズも

Java Solution全記事一覧

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）