JavaScriptのデバッグ

スクリプトを簡単に発見

多くの Web アプリケーションは大量のファイルで構成され、デバッグしたいファイルを見つけるだけでも一苦労です。Firebug のスクリプトファイル選択機能は、ファイルの内容を綺麗に整列して表示するので、あなたは目的のファイルを簡単に見つけることができます。

どこでも実行を一時停止

Firebug で「この行まで行ったら実行を一時停止」といった具合にブレークポイントを設定できます。実行が停止している間は、変数の値を確認したり、オブジェクトを調査したりできます。

ブレークポイントを設定するには行番号をクリックします。ブレークポイントが設定されると赤い点が出現します。赤い点をクリックするとブレークポイントを解除できます。

条件を付けて実行を一時停止

ブレークポイントはイチイチそこで止まってしまうとかえって不便にもなり得ます。ある特定の条件下でのみ実行を停止させたい、ということもあるでしょう。そんなとき、Firebug なら「式をチェックしてマッチしたときのみ停止する」といった条件付き区切り点を設定できます。

条件付きブレークポイントを設定するには、行番号を右クリックすると現れるバブルポップアップに JavaScript の式を入力します。その式を右クリックすると編集が、左クリックするとブレークポイントの解除ができます。

1 行ずつ実行

Firebug では、一旦デバッガを一時停止状態にした後に続きを 1 行ずつ実行させることができます。こうすることで、あなたはどの行が、どういった具合に変数やオブジェクトに影響を及ぼしているかを実際に見ることができます。

1 行ずつだけではなく、数行ずつ実行するよう設定することも可能です。そういうときは、実行を停止させたい行でコンテキストメニューから [この行まで実行] を選びます。

エラーに割り込み

あなたがデバッガを呼び出すばかりでなく、ときにはデバッガの方があなたを呼び出すこともあります。エラーが起こったときトラブルの原因となった状況を即座に調査できるように、エラーが発生したら自動的にデバッガが表示されるように設定することができます。

スタックトレースから抽出

デバッガが一時停止しているとき、呼び出しスタックが表示されます。これは、現在走っていて再び動き出すのを待っているファンクションがネストされたものです。

呼び出しスタックはツールバーに小さな細長いボタンとして表示され、スタック上のファンクションがその名前となります。ボタンをクリックすると、一時停止しているファンクションの行にジャンプして、そのファンクション内のローカルな変数を見ることができます。

式を見る

デバッグ中、しばしば複雑な式の値や DOM に散らばったオブジェクトを見たいと思うことがあるでしょう。Firebug では、デバッガに入る毎に値が更新される任意の JavaScript 式を打ち込むことができます。

式を打ち込むとき、[Tab] キーでオブジェクトのプロパティのオートコンプリート機能が使えることを忘れないでおきましょう。

変数をツールチップで表示

デバッガが一時停止しているときにファンクションの変数にマウスカーソルを合わせると、変数の値がツールチップで表示されます。これはコードから目を離さずに読んでいる箇所が何を示しているかを知るには便利な方法です。

JavaScript のパフォーマンスをプロファイリング

あなたのアプリケーションはほぼ完ペキ。バグはないし、画像も表示されるし、ユーザの評判も上々。ただ一点、何故か判らないけど機能の一部が重いことを除いては。

Firebug を使うと、二度とそんな疑問を抱くことはなくなります。Firebug プロファイラを使えば、ウサギとカメを瞬時に見分けられるでしょう。

プロファイラを使うには、まずコンソールタブで [プロファイル] ボタンをクリックします。その後アプリケーションをちょっと使ってみるか、あるいはページ全体を再読込してから、もう一度 [プロファイル] ボタンをクリックします。すると、それぞれのファンクションが呼び出されるのにどれくらい時間がかかったかの詳細が表示されます。

ファンクション呼び出しのログを取る

問題のあるファンクションが余りにも多く呼び出された場合、その度にデバッガを起動してたら大変です。そんなときは、いつそれが呼び出されたのか、どんなパラメータが使われたのかだけ判ればいいのに、と思いませんか？

ファンクションへの呼び出しを記録するには [スクリプト] タブでそのファンクションを右クリックし、["ファンクション名" のログを取る] を選択します。すると、コンソールに呼び出しが記録されます。

任意の行に直接ジャンプ

スクリプトのある特定の行に直接跳びたいなんてことは結構よくあることだと思います。そんなときは左のスクリーンショットのようにクイックサーチボックスに # に続けて行番号を打ち込むだけ。こんなに簡単なことはありません。