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

» 2009年12月03日 00時00分 公開
[岡本隆史@IT]

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

 近年、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のインストール 図1 Firebugのインストール

Firebugの起動

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

図2 Firebugの起動 図2 Firebugの起動

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

コンソール

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

図3 QALab集計アイコン 図3 [コンソール]の設定

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

図4 [コンソール]の表示 図4 [コンソール]の表示

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

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

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

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

       1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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