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

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

Web ページのロードに、どうしてそんなに時間がかかっているのかわかりますか?今まで HTML をブラウズしながら調査し、編集しようと思ったことはありませんか?CSS をその場で調整しようと思ったことは?この記事では、Firefox ブラウザーを対象とした無料のオープンソース拡張機能、Firebug の使い方を紹介します。便利な開発者向けの機能とツールを豊富に提供する Firebug を使えば、HTML、CSS、JavaScript コード、そしてネットワーク・トラフィックを含め、ライブ・ページをモニター、編集、デバッグすることができます。この記事を読んで、Firebug を使って Web アプリケーションや Ajax アプリケーションのデバッグおよび調整といった作業にかかる時間を短縮する方法を学んでください。

Sami Salkosuo (sami.salkosuo@fi.ibm.com), Software Architect, IBM

author photoSami Salkosuo は 1999年から IBM に勤務しています。彼は Sun 認定 Java プログラマーであるとともに、WebSphere Message Broker および WebSphere MQ の IBM 認定ソリューション開発者でもあります。



2008年 5月 06日

はじめに

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

Internet Explorer、Opera、および Safari 向けの Firebug Lite バージョンもあります。

この記事を読めば、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 を有効 (Enable Firebug)」をクリックすると、Firebug の動作を確認することができます (図 2 を参照)。

図 2. 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 の調査
  3. 選択状態の HTML 要素をクリックしてください。面白いことになってくるのはここからで、このクリックにより、選択された要素に調査機能が「ロック」されます。
  4. Firebug ウィンドウで Edit をクリックすると、選択された要素を編集することができます。

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

    図 4. HTML の編集
    HTML の編集

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

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

CSS の編集

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

図 6. CSS の調査
CSS の調査

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

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

CSS の視覚化

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

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

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

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

JavaScript ツール

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

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

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

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

クリックして大きなイメージを見る

図 10. JavaScript デバッガー

JavaScript デバッガー

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

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

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

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

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

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

クリックして大きなイメージを見る

図 12. 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 API にはその他にも、スタック・トレース、オブジェクトの調査、ストリングのフォーマット設定といった便利な機能があります。

JavaScript コマンドライン

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

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

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

クリックして大きなイメージを見る

図 14. コマンドライン JavaScript

コマンドライン JavaScript

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


ネットワークのモニター

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

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

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

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

クリックして大きなイメージを見る

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

ネットワーク・モニター

その他の機能

developerWorks の Ajax リソース・センター

Ajax resource center にアクセスしてください。ここには記事、チュートリアル、ディスカッション・フォーラム、ブログ、ウィキ、イベント、そしてニュースなど、Ajax プログラミング・モデルに関する情報が豊富に用意されており、ワンストップ・ショップになっています。新しい情報もここに記載されます。

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

エラー・レポート

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

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

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

DOM

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

カスタマイズ

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


まとめ

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

参考文献

学ぶために

製品や技術を入手するために

  • 賞を獲得した Mozilla の Web ブラウザー、Firefox をダウンロードしてください。
  • Web 開発ツールを豊富に揃えた Firefox 向け Firebug をダウンロードしてください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


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