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

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

岡本 隆史
2009/12/3

高度化するWebのデバッグに悩む人、必見！

今回の主な内容 ・高度化するWebのデバッグに悩む人、必見！ ・バグを燃やせ！ 「Firebug」超入門 ・Firebugを拡張する7つで、バグを燃やしまくれ！ ・自分でアドオンを作ってカスタマイズも

　近年、Google Chrome、Firefox、Safari、Opera、Internet Explorer（以下、IE）がJavaScriptの実行速度の最速の座を争っていますが、それに伴いJavaScriptによるフレームワークやコンポーネントが多数出現し、Webブラウザのユーザビリティは飛躍的に向上してきました。

　一方で、開発者／デザイナにとっては複雑化するWebアプリケーションのデバッグが悩みの種となってきています。そんなときにお勧めなのが、Firefox上で動作するアドオン「Firebug」です。これを利用すれば、デバッグがかなり効率的に行えます。

　本稿では、Firefoxのアドオンとして利用するFirebugと、Firebugをさらに効果的に利用する7つのアドオン「FireCookie」「Inline Code Finder」「FireRainbow」「CodeBurner」「FireQuery」「FireFinder」「YSlow」を紹介します。高度化するWebアプリケーションのデバッグに頭を悩ませている方は、ぜひご一読ください。

バグを燃やせ！ 「Firebug」超入門

　Firebugは、Firefoxのアドオンとして利用するWebアプリケーションのデバッギングツールです。HTML/CSS、JavaScriptのデバッグやプロファイリングができます。Firebugは非常に良くできたツールで、Webアプリケーションのデバッグを飛躍的に楽にします。

　IE対応のWebアプリケーションを開発する場合でも、まずはFirebugを利用してFirefox上でレイアウトとJavaScriptのデバッグを行っているプロジェクトも数多くあります。

■ Firebugのインストール

　繰り返しますが、FirebugはFirefoxのアドオンとして提供されています。使うには、Firefoxのメニューの［ツール］→［アドオン］でアドオンマネージャを起動し、「アドオンを入手」アイコンを選択します。アドオンの検索画面にFirebugを入力すれば（図1）、Firebugアドオンが表示されるので選択してインストールします。

図1　Firebugのインストール

■ Firebugの起動

　Firefoxを再起動してインストールが完了したら、早速Firebugを使ってみましょう。デバッグしたいWebページ/Webサイトを表示して、［ツール］→［Firebug］→［Firebugを開く］を選択します。

図2　Firebugの起動

　起動すると、［HTML］タブが表示され、HTML/CSSをデバッグできます。デバッグの仕方を見る前にまずは、コンソールから見ていきましょう。

■ コンソール

　［コンソール］を利用すると、HTMLやJavaScriptのエラーを確認できます。［コンソール］タブの右の三角をクリックして、［動作中］と［コマンドラインパッドを表示］と、表示したいエラーメッセージにチェックを入れます（図3）。

図3　［コンソール］の設定

　すると、［コンソール］が表示されます。［コンソール］には、エラーメッセージやコマンドラインパッド上で実行したJavaScriptの実行結果などが表示されます（図4）。

図4　［コンソール］の表示

　コマンドラインパッド上で、console.log（JavaScript文）を実行すると、JavaScriptの実行結果をコンソールに出力できます。

　また、［プロファイル］ボタンをクリックすると、JavaScriptのプロファイリングができ、実行に時間がかかっているメソッドを簡単に特定できます。

図5　JavaScriptのプロファイリング

　次ページでは、Firebugを使い、HTMLやCSS、JavaScriptのデバッグやプロファイリングを行う方法を説明し、Firebugを拡張する7つのアドオンも紹介し始めます。

1-2-3

Index

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

Java Solution全記事一覧

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