Firebugを使ったJavaScriptデバッグ徹底ガイド|基本機能から実践手順まで

デバッグとは何か

デバッグとは、ソフトウェアから欠陥(バグ)を体系的に取り除くプロセスのことです。作業はテストケースの実行から始まります。テストケースを実行すると、実際の結果と期待される結果が比較され、両者に不一致があれば根本原因の分析が行われます。さらに、リグレッションテストなどの追加テストを実施することで、結果が期待どおりのラインに沿っていることを確認します。

静的なWebページの作成にはHTMLが広く使われています。一方、動的なWebアプリケーションを開発するには、Webのスクリプト言語であるJavaScriptが欠かせません。コードをバグのない状態に保つため、プログラマーはさまざまなデバッグ手法を駆使し、エラーや例外の発生を未然に防ごうとします。しかし、JavaScript自体には高度なデバッグ機能が備わっていません。幸いなことに、ブラウザベースのデバッガー「Firebug」を使えば、JavaScriptで書かれたコードのデバッグも簡単に行えます。

Firebugデバッガーの主要コンポーネント

ここで、Firebugデバッガーを構成する各要素について、用語とあわせて詳しく見ていきましょう。

• JSEditor(JavaScriptエディター) − JSEditorはJavaScriptエディターのことです。「Break on All Errors(すべてのエラーで一時停止)」オプションにチェックを入れるだけで、スクリプトの実行を一時停止でき、JavaScriptコードのデバッグが可能になります。
• Scriptタブ − Firebugパネルの1番目のタブはConsole、2番目と3番目はHTMLとCSS、そして4番目がScriptタブです。Scriptパネルは左右のサブパネルに分かれており、左側がJavaScriptエディター、右側には「Watch」と「Breakpoint」という2つのサブパネルがあります。
• JSFileSelector − 対象ページに関連するすべてのJavaScriptファイルの一覧を表示します。
• ブレークポイント − ブレークポイントを設定した箇所では、JavaScriptの実行が停止します。Firebugのブレークポイントには「静的」「条件付き」「動的」の3種類があります。静的ブレークポイントは、Scriptパネル内の対象のコード行をクリックするだけで設定できます。条件付きブレークポイントは、その名のとおり特定の条件に基づいて設定します。動的ブレークポイントは関数名を指定して設定するもので、コマンドラインから設定できるほか、debug関数とundebug関数という2つのよく使われる関数を利用しても設定できます。
• ブレークポイント一覧 − 設定済みのすべてのブレークポイントがこのパネルに表示されます。不要になったブレークポイントはここから削除できます。
• Watchウィンドウ − Watchウィンドウは、Microsoft Visual Studioを使い慣れた方ならおなじみの機能でしょう。ただし、FirebugのWatchウィンドウとVisual Studioのそれとの細かな違いを理解しておくと大いに役立ちます。FirebugのWatchウィンドウは、スコープ内にある変数の値をすべてリスト形式で表示します。一方、Visual StudioのWatchウィンドウは、ユーザーが選択した変数のみの値を表示する仕組みです。

Firebugアドオンのインストール方法

1. Mozilla Firefoxを開き、ウィンドウ右上にあるOpen Menu(メニューを開く)ボタンを探します。
2. Open Menuをクリックし、Add-ons(アドオン)を選択すると、新しいウィンドウが開きます。
3. 検索ボックスに「Firebug」と入力し、キーボードのEnterキーを押します。
4. Firebugアドオンが表示されたら、Install(インストール)をクリックします。

これで、FirebugがFirefoxブラウザーに追加されます。

Firebugを使ったJavaScriptコードのデバッグ手順

以下のシンプルな8ステップで、Firefox上のFirebugを使ってJavaScriptコードをデバッグできます。

1. JavaScriptコードをメモ帳などのテキストエディターに記述し、拡張子.htmを付けて保存します。保存した.htmファイルをFirefoxで開き、Firebugデバッガーのコンソールを起動しましょう。
2. 対象のコード行に静的ブレークポイントを設定します。Scriptタブの右側パネルで、ブレークポイントが割り当てられた行を確認できます。
3. Firebugツールバーの「Step Over」ボタンをクリックしながら、コードを1行ずつ実行します。ツールバーには、Step Over以外にも「Continue」「Step Into」「Step Out」の3つのボタンがあります。ブレークポイントに到達した後、スクリプトの実行を再開するにはContinueをクリックします(ショートカットはF8キー)。特定の関数呼び出しをまたいで次の行へ進むにはStep Over(F10キー)、関数の内部に入って処理を追うにはStep Into(F11キー)を使用します。Step Outをクリックすると、スクリプトの実行を再開し、次のブレークポイントで停止します。
4. Watchウィンドウに表示されている変数の値を注意深く確認します。
5. 必要な対応を行い、バグを特定して修正します。
6. ページを再読み込みします。Firefoxの再読み込みボタンをクリックするか、ショートカットキーのCtrl+Rを押します。
7. ほとんどの変数の値はWatchウィンドウに表示されますが、一部の変数が表示されない場合もあります。そのようなときは、CommandLine APIの活用がおすすめです。特定の関数の先頭行にブレークポイントを追加するにはdebug(fn)を、削除するにはundebug(fn)を使用します。
8. バグ修正後は、もう一度コードを実行します。まだバグが残っている場合は、上記の手順を繰り返してデバッグを行います。最後にファイルを保存し、Firefoxでプレビューして完了です。

補足:Firebugの現状について

なお、Firebugはすでに開発・サポートが終了しており、現在は新しいFirefoxでは利用できません。Firebugの機能や思想は、Firefox標準の開発者ツール(Firefox DevTools)へと受け継がれています。最新環境で同様のデバッグを行うには、F12キーでDevToolsを開き、「デバッガー」パネルを使ってブレークポイントの設定やステップ実行、ウォッチ式の確認を行うとよいでしょう。

Firebugのような強力なデバッガーを活用すれば、プログラマーにとって最大の悩みの種であるバグ修正も格段に楽になります。デバッグツールを使いこなし、快適な開発ライフを送りましょう。