連載
» 2009年12月03日 00時00分 公開

ユカイ、ツーカイ、カイハツ環境!(10):Webのバグを燃やしまくるFirebugと、そのアドオン7選 (3/3)

[岡本隆史,@IT]
前のページへ 1|2|3       

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

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

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

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

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

図14 タグのヘルプ表示の例 図14 タグのヘルプ表示(コード例)

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

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

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

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

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

図16 FireQueryで表示したセレクタのマッチング結果をプレビュー 図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のマッチング結果 図17 FireFinderによるXPathのマッチング結果

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

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


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

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

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

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


「ユカイ、ツーカイ、カイハツ環境!」バックナンバー
前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。