Firebugの機能を拡張する

 最近は、Webサイトのデザインや構築が迷路のように複雑な作業になることがある。そうした作業を単純化してくれるツールの1つが、有名な Firebug 拡張機能である。Firebugを使うと、HTML、CSS、JavaScriptをFirefoxの中で編集し、デバッグすることができる。Firebugはそのままでも十分役に立つが、追加の拡張機能を使うと元の機能が一段と強化され、開発者やデザイナの作業が一層やりやすくなる。

YSlow

 Firebugにはネットワークの処理状況を監視する機能があるが、YSlowを追加すると、その機能をさらに強化し、Yahoo’s best practicesの評価基準に照らして自分のWebサイトをチェックすることができる。パフォーマンスをチェックすることに加え、YSlowでは、Expiresヘッダ、ETag、HTTP要求の合計数など、最適化に役立つ項目を調査するためのグラフとチャートを表示することもできる。

Jiffy

 Netflixで開発されたJiffyは、ページ上でロードされるJavaScriptの時間計測を(オープンソースのWebサイト計測スイートであるjiffywebによって)チェックおよびキャプチャし、データをグラフィカル形式で表示する。このデータは、さまざまなJavaScriptライブラリによるページ・ロードへの影響を比較して軽減するのに役立つ。

FirePHP

 Firebugは、HTML、CSS、およびJavaScriptをデバッグするための機能を備えているが、FirePHPを使うと、FirebugでPHP5以降をサーバ側の言語として操作できるようになる。FirePHPを動かすにはPHPライブラリをインストールする必要があるが、ライブラリのインストールが終われば、FirePHPで特殊な"X-FirePHP-Data"ヘッダを利用して、Firebugペインにデバッグ・データを取り込むことができる。サーバからクライアント側に送られるデバッグ・データが、デバッグ中のページのコンテンツの妨げになることはない。クイック・チュートリアルを含めて、FirePHPの詳細については、FirePHPのホームページを参照してほしい。

Firecookie

 Firecookieを使うと、現在ページ上で使われているすべてのCookieの表示、特定のCookieの検索、ページ上のCookieの監視、およびCookieの追加と削除を自在に行うことできる。Firecookieには、Cookieの名前、値、ドメイン、有効期限、パスなどの情報を確認するための機能がある。また、Firecookieを使って、Cookieの受け入れや拒否の設定をFirebugの中から直接変更することもできる。

Pixel Perfect

 Firebugの機能は、開発者向けのものだけではない。デザイナであれば、Pixel Perfectを試してほしい。Pixel Perfectを使うと、ページ・デザインの半透明の画像(モックアップ)を重ね合わせて表示することができる。その後、Firebugを使って、ページ上のすべての要素をそれに合わせて配置できる。Pixel Perfectはまだ実験的なアドオンだが、私がテストした限りでは十分に安定している。

 Pixel Perfectの機能が気に入って、クロスブラウザ環境で使いたいと思ったら、OverlayCompを試してほしい。利便性は劣るものの、ほぼ同等の機能を実現するオープンソースのスクリプトである。

Rainbow for Firebug

 Firebugのデフォルトのスクリプト・パネルでは、ときどきプレーン・テキスト・ファイルを操作しているような気分になることがある。そうならないようにするには、やはり実験的なアドオンであるRainbow for Firebugを試してほしい。Rainbow for Firebugは、スクリプト・パネルに構文のハイライト機能を追加し、変数、オブジェクト、関数などを直観的にわかりやすい色付きのテキストで表示する。デフォルトのハイライト表示色を別の色の組み合わせに変えることもできる。色の設定オプションや、独自の色を作成する方法については、Rainbow for Firebugのホームページを参照してほしい。

 Rainbowでは、CodeMirrorのパーサを利用している。

 ここで紹介してきた拡張機能は、いずれもFirefox 3と何らかの形式のFirebug 1.2に対応している。Rainbowについては、Firebug 1.2が必須である。それより古いバージョンのFirebugと共にインストールすると、Firebugが機能しなくなる。

 Firebugは、そのままでもWeb開発者にとってきわめて有用なツールだが、これらのアドオンを使って機能を拡張することにより、サイトの実装とデバッグにかかる時間を短縮することができる。

Linux.comでは毎週月曜日に、さまざまなエクステンション、プラグイン、アドオンを紹介しています。お使いのエクステンションなどについて、その概要、便利な点、活用のヒントを1000ワード以内にまとめてお寄せください(英語)。採用した方には100ドル進呈いたします(同じテーマのものが掲載済みまたは検討中の場合がありますので、あらかじめメール(英語)にてお問い合わせください)。

Linux.com 原文(2008年9月15日)