Firefox 3とFirebugで始めるJavaScript開発

第1回 Firebugの基礎知識と,Firebugを使った開発のメリット

この記事を読むのに必要な時間:およそ 2.5 分

Firebug基本の基本

FirefoxとFirebugのインストールが完了したら,メニューバーより「ツール⁠⁠→⁠Firebug⁠⁠→⁠OpenFirebug」を選択するか,もしくはウィンドウの右下にあるチェックをクリックしてください図3⁠。

図3 ここをクリック

図3 ここをクリック

クリックするとFirefoxウィンドウの下部にFirebugの画面が表示されます。インストール直後はFirebugが無効になっているので,⁠Enable Firebug」をクリックしてFirebugを有効にしましょう図4※1⁠。

図4 Firebugの画面

図4 Firebugの画面

※1
ツール->Firebug->Disable Firebugのチェックを外す,でも有効にできます。

各タブの簡単な解説

Firebugを有効にすると,ウィンドウにタブが表示されます。

図5 Firebugの画面(有効時⁠⁠。タブが表示される

図5 Firebugの画面(有効時)。タブが表示される

タブには「Console」⁠HTML」⁠CSS」⁠Script」⁠DOM」⁠Net」の6種類があり機能ごとにタブを切り替えて使っていく形になります。ここでは,各タブについて簡単な解説をしていきます。

Console

Consoleタブでは開いているページ上で任意のJavaScriptを実行できます。試しにConsoleタブの下に表示されているテキストエリア図6に,以下を入力して,Enterキーを押してみてください。

リスト1

alert('Hello World!');

図6 FirebugのConsole画面

図6 FirebugのConsole画面

"Hello World!"というアラートが表示されましたか? このように,ConsoleタブからはJavaScriptを実行することができます。

また,これ以外にもConsole APIやCommand Line APIを利用してコンテンツ側からFirebugで実装されている機能を利用することができます。それらの詳しい利用方法については第2回以降で解説をしていきます。

HTML

HTMLタブでは左側の窓でHTMLのソースを確認しながら,右側の窓で「DOM」⁠Layout(ボックス⁠⁠Style」を確認することができます図7⁠。また,それらをリアルタイムで編集し,ブラウザで確認を行えます。

図7 HTMLタブのLayout確認表示例

図7 HTMLタブのLayout確認表示例

試しにFirebug左上の「Inspect」をクリックして,HTML上にマウスカーソルを移動させてみてください。すると,現在onmouseになっている領域が囲まれ,HTMLタブで該当のHTMLソースがハイライトされると思います。調査したい領域で左クリックをすることで確定でき,選択されているHTMLについて右側の窓で「DOM」⁠Layout」⁠Style」を確認することができます。

CSS

CSSタブでは,CSSファイルごとに内容の確認と編集を行うことができます。編集したい場合は編集したいソースの場所でダブルクリックすることで行うことができます。

Script

ScriptタブではJavaScriptのソースの確認と編集,デバッグを行うことができます。左側の窓でブレークポイントを設定しつつ,右側の窓で変数の監視などを行うことができます。行の頭を左クリックすることでブレークポイントが設定され,ブレークポイントには赤い丸印が表示されます図8⁠。

図8 Scriptタブ

図8 Scriptタブ

もちろん,ブレークポイントからのステップ実行も行うことができます。ステップ実行はFirebugの右上検索窓の左側にあるアイコンをクリックすることで行うことができます。

DOM

DOMタブでは,JavaScriptのオブジェクトの中身を解析することができます。JavaScriptオブジェクトやHTMLエレメントの各要素をリアルタイムで編集することができます。

図9 DOMタブ

図9 DOMタブ

DOMタブは,JavaScriptのデバッグでオブジェクトを参照するためにたびたび利用されます。

Net

Netタブではネットワーク接続の監視を行うことができます。HTMLを読み込んだ際のファイルごとのダウンロード時間や,各ファイルのサイズ,また合計リクエスト数やダウンロード時間を解析することができます図10⁠。

図10 Netタブ

図10 Netタブ

HTML,CSS,JS,XHR,Images,Flashと,それぞれでサイズと読み込み時間を測定でき,またキャッシュからの読み込みがどれだけあるかも調べることができます。

次回予告

これで,Firebugの導入からどのようなことができるようになるのか全体像をつかめていただけましたでしょうか?

次回より,各タブの機能の詳細に触れながらFirebugに実装されている各APIを利用しての実際のデバッグについて解説していきたいと思います。

著者プロフィール

堀邦明(ほりくにあき)

徳山工業高等専門学校卒業後,ヤフー株式会社に入社。Yahoo! JAPAN トップページのフロントエンドエンジニアとして主にJavaScript,PHPによる開発を行う。

また,個人の活動として,JavaScriptに関するオンライン上のイベント「Roppongi.JS」の企画・主催を行う。