目次


Firebug を使ってオンザフライでアプリケーションをデバッグ、調整する

ライブ Web ページをモニター、分析、編集する時間を節約する

Comments

はじめに

Mozilla Firefox ブラウザーを対象としたオープンソースの拡張機能である Firebug は、あらゆる Web サイトの CSS (Cascading Styles Sheet)、HTML、DOM (Document Object Model)、そして JavaScript をモニター、編集、デバッグするためのツールを提供します。JavaScript コンソール、ロギング API、そして便利な Network Monitor を備えた Firebug では、Web アプリケーションと Ajax アプリケーションを簡単にデバックし、調整することができます。

この記事を読めば、Firebug の以下の機能を使いこなせるようになります。

  • ライブ Web ページでの HTML、CSS、JavaScript の編集
  • デバッグおよびプロファイル・レポート
  • ロギングによる実行時間の測定
  • Network Monitor での Web ページのロード時間分析
  • エラー・レポート

開始手順

Firefox を使って Firebug をダウンロードしてください。ページの右の方にあるオレンジ色の「Firefox へインストール」ボタンをクリックすると、この拡張機能がインストールされます。

Firefox が拡張機能をインストールしたら、ブラウザーを再起動します。Firebug を使用する方法は以下のとおりです。

  1. 任意の Web ページに進み、F12 を押してブラウザー・ウィンドウに Firebug を開きます。
  2. Firebug を別のウィンドウに開くには、CTRL-F12 を押します (これは、モニターが 2 台ある場合に重宝する機能です)。

    この記事では上記のうち、最初の方法を使用して同じブラウザー・ウィンドウに Firebug を開きます (図 1 を参照)。

図 1. インストール後の Firebug
インストール後の Firebug
インストール後の Firebug

インストールが完了した時点では、Firebug は無効に設定されています。「Firebug を有効 (Enable Firebug)」をクリックすると、Firebug の動作を確認することができます (図 2 を参照)。

図 2. developerWorks のフロント・ページを示す Firebug
developerWorks のフロント・ページを示す Firebug
developerWorks のフロント・ページを示す Firebug

この記事の残りでは、Firebug の機能について説明します。

HTML および CSS ツール

HTML と CSS のツールには、HTML の調査と編集、CSS の編集、そして CSS の視覚化ツールがあります。

HTML の調査と編集

HTML 調査機能を使用すると、ソース・コード内の HTML の位置を視覚的に示すことができます。

  1. Firebug ウィンドウで「調査 (Inspect)」をクリックします。
  2. カーソルを任意の HTML コンポーネントの上に移動させます。すると、その HTML 要素が青色の枠で囲まれ、Firebug ウィンドウに該当する HTML ソースが表示されます。図 3 はその一例です。
    図 3. Firebug による HTML の調査
    Firebug による HTML の調査
    Firebug による HTML の調査
  3. 選択状態の HTML 要素をクリックしてください。面白いことになってくるのはここからで、このクリックにより、選択された要素に調査機能が「ロック」されます。
  4. Firebug ウィンドウで Edit をクリックすると、選択された要素を編集することができます。

    図 4 が示しているのは、Firebug 編集ウィンドウと、ブラウザー・ウィンドウに表示された編集後のテキストです。Ajax に関する元の見出しは、「Editing with Firebug」に置き換えられています。

    図 4. HTML の編集
    HTML の編集
    HTML の編集

要素の調査中には、Firebug ウィンドウに要素のネスト状態が表示されます (図 5 を参照)。

図 5. 要素のネスト
要素のネスト
要素のネスト

CSS の編集

Web ページを調査することによって CSS の編集を始めることもできます。調査 (Inspection) ビューには、継承するスタイルを含め、関連する CSS エントリーが表示されます。図 6 に一例を記載します。

図 6. CSS の調査
CSS の調査
CSS の調査

CSS ツールでは、CSS プロパティーをライブで編集したり、プロパティーの無効化、自動補完を行うことができます。さらに、図 7 のように画像をプレビューすることもできます。

図 7. CSS による画像のプレビュー
CSS による画像のプレビュー
CSS による画像のプレビュー

CSS の視覚化

HTML の調査中には、視覚化された CSS が表示されます (図 3 の青色の枠を思い出してください)。その詳細情報が表示されるのは、Firebug のレイアウト (Layout) タブです。ここには余白やオフセット、そして関連するその他の測定値が記載されます。図 8 のレイアウト・ウィンドウに示されているのは、ナビゲーション要素の測定値です。

図 8. CSS ボックスの測定値
CSS ボックスの測定値
CSS ボックスの測定値

図 9 に、CSS ボックスをライブで編集できる Firebug の素晴らしい機能を示します。

図 9. CSS ボックスの編集
CSS ボックスの編集
CSS ボックスの編集

JavaScript ツール

最近の Web 開発で特に有用なツールは、JavaScript ツールです。Firebug はデバッグ、プロファイル作成、ロギングのためのツール、そしてコマンドライン・コンソールを提供します。

デバッグとプロファイル作成

Firebug の JavaScript ツールには、ブレークポイントの設定やウォッチ式、そして一般的なデバッガーにあるツールが揃っています。図 10 に、ブレークポイントと実際のステップ実行の様子を示します。ツールチップとして、hostname 変数の値が表示されていることに注目してください。

図 10. JavaScript デバッガー
JavaScript デバッガー
JavaScript デバッガー

便利なデバッグ・ツールには、以下の機能があります。

  • JavaScript の特定の行への直接ナビゲーション
  • ウォッチ式 (式の監視) (あらゆる JavaScript の式が可能)
  • 呼び出しスタックの表示
  • 条件付きブレークポイント
  • エラー発生後のデバッグ開始機能

JavaScript のプロファイル作成機能は非常に役立ちます。Firebug では万事がそうであるように、このプロファイル作成機能を使用する方法も簡単で、コンソール (Console) タブでプロファイル (Profile) をクリックするだけでプロファイラーが起動します (図 11 を参照)。

図 11. JavaScript プロファイラーの起動
JavaScript プロファイラーの起動
JavaScript プロファイラーの起動

プロファイルの作成が開始されたら、そのサイトを少しブラウズしてから Profile をクリックしてください。すると、この短時間のプロファイル作成セッションのレポートが表示されます (図 12 を参照)。

図 12. JavaScript プロファイラーによるレポート
JavaScript プロファイラーによるレポート
JavaScript プロファイラーによるレポート

このレポートには、関数の所要時間、平均時間などが示されます。

JavaScript でのロギング

デバッグではなく、昔ながらのロギングをお望みの方のために、Firebug ではロギング機能も用意しています。ロギングで使用するのは Firebug JavaScript API で、最も単純なログ・エントリーは console.log("logging") です。

Console API には、その他にもリスト 1 に記載する関数が組み込まれています。

リスト 1. Firebug コンソール API の例
console.time("test timer");
console.log("Hello from ",document.title);
console.info("This is info");
console.warn("This is warning");
console.error("This is error");
console.timeEnd("test timer");

実行時間を測定するには、console.timeconsole.timeEnd を使用します。さらに、リスト 1 に記載されているような詳細レポートを表示する console.profile()console.profileEnd() を使って実行時間を測定することもできます。

図 13 に、測定結果を示します。ここでは、JavaScript コンソール・ロギング・テスト関数が Web サーバーによってサービス提供されるページに追加されています。

図 13. Console のロギング機能
Console のロギング機能
Console のロギング機能

Console API にはその他にも、スタック・トレース、オブジェクトの調査、ストリングのフォーマット設定といった便利な機能があります。

JavaScript コマンドライン

Firebug で特に強力な機能のひとつに挙げられるのは、JavaScript用のコマンドラインです。このコマンドラインは、他のすべてのコマンドラインと同じように使用します。すると、作成したあらゆる JavaScript がページの一部であるかのように実行されます。このコマンドラインでは、DOM を調べたり、プロパティーを取得したりするだけでなく、他にもさまざまなことが可能です。戻り値はすべて、コンソールに表示されます。

コマンドラインには自動補完機能 (Tab キーを使用) や、ワンライナーではなく関数全体を書き込めるフルテキスト・エディターなどが備わっています。図 14 に単純なコンソール・セッションを示します。Web ページの左上隅に表示されているロゴに注目してください。ここでもライブで編集することができます。

図 14. コマンドライン JavaScript
コマンドライン JavaScript
コマンドライン JavaScript

Console と同じく、コマンドラインにも Firebug で使用する特殊な関数 (指定の ID を持つ要素を返す $(id) など) が組み込まれた API があります。

ネットワークのモニター

Firebug のネットワーク (接続) をモニター (監視) する機能では、Web ページのロードに費やされた時間をモニターすることができます。ファイルのロード開始時間と停止時間を他のすべてのファイルと相対して示すバーを表示するには、接続 (Net) タブを使用してください。ネットワークをモニターする機能はトラフィックをファイル単位で分割するため、画像、JavaScript、HTML などのロードにそれぞれ費やされた時間がわかります。さらに、リソースがブラウザーのキャッシュからロードされたかどうかもわかります。

Ajax 開発の場合、Firebug は各 XMLHttpRequest を接続 (Net) タブとコンソール (Console) タブの両方に表示します。

図 15 に、ネットワークをモニターする機能で HTTP リクエストおよびレスポンスのヘッダーをどのように調べられるかを示します。ヘッダーを表示するには、ただ単に各リクエストの左側にある矢印をクリックしてリクエストを展開すればよいだけです。リクエストの合計数、経過時間、コンテンツのサイズは Firebug ウィンドウの下部に示されます。

図 15. ネットワーク・モニター
ネットワーク・モニター
ネットワーク・モニター

その他の機能

Firebug にはその他にも以下の機能があります。

エラー・レポート

エラーが発生した場合の便利な機能として、Firebug は以下の機能を提供します。

  • ステータスバーのインジケータ
  • 行番号、ファイル名、およびスタック・トレース
  • デバッガー統合
  • 検索およびフィルター

Firebug は、表示中のページのみに関連するエラーも示します。

DOM

DOM (Document Object Model) は、Web ページに含まれるオブジェクトと関数の階層です。Firebug の DOM にはカスタム・オブジェクトと標準オブジェクトのすべてが含まれ、DOM エクスプローラーではそのそれぞれを区別することができます。また、JavaScript コードのナビゲーション、自動補完、ライブ編集を行うこともできます。

カスタマイズ

Firebug のカスタマイズ機能には、ブラックリストとホワイトリスト、そして個人の必要に応じてフォント・サイズを変更する機能があります。

まとめ

あらゆる類の Web 開発を行う人々にとって、Firebug はなくてはならないツールです。Firebug はテストおよびデバッグ・セッションを容易にするだけでなく、CSS スタイルと Web ページのルック・アンド・フィールを調整するのにも最適なツールとなります。


ダウンロード可能なリソース


関連トピック

  • Internet Explorer、Opera、および Safari 向けの Firebug Lite について読んでください。
  • 賞を獲得した Mozilla の Web ブラウザー、Firefox をダウンロードしてください。
  • Web 開発ツールを豊富に揃えた Firefox 向け Firebug をダウンロードしてください。

コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=311972
ArticleTitle=Firebug を使ってオンザフライでアプリケーションをデバッグ、調整する
publish-date=05062008