Firebugのスクリプトパネルでは、JavaScriptのコードを表示するのと同時に、ブレークポイントを使用した逐次実行によるデバッグを行うことができる。 - builder">

Firebugでブレークポイントを利用したJavaScriptデバッグを

杉山貴章(オングス)
2008-11-13 17:00:00
<a href="https://addons.mozilla.org/ja/firefox/addon/1843" target="_blank">Firebug</a>のスクリプトパネルでは、JavaScriptのコードを表示するのと同時に、ブレークポイントを使用した逐次実行によるデバッグを行うことができる。
最新特集【一覧】

ブレークポイントを設定してオブジェクトの値を監視

 スクリプトパネルでは、JavaScriptを含むHTMLのソースコードを行番号付きで表示する。行番号をクリックするとそこにブレークポイントを設定することができ、図1のように赤い丸が付く。

図1 ブレークポイントの設定 図1 ブレークポイントの設定

 この状態でスクリプトが呼び出されると、ブレークポイントを設定した行の直前で処理が停止し、図2のようにその瞬間の各オブジェクトの値が右のフレームに表示される。[スタック]タブではファンクションのスタックトレースが、[ブレークポイント]タブでは設定されているブレークポイントの一覧が表示される。処理の再開やステップイン実行、ステップオーバー実行、ステップアウト実行は上部に並んだアイコンで行う。

図2 ブレークポイントにおける各値の表示 図2 ブレークポイントにおける各値の表示

 ブレークポイントには、赤丸を右クリックすることで条件を指定することもできる。これによって、指定した条件がTrueの場合のみ処理が停止するようになる。

図3 条件付きブレークポイントの設定 図3 条件付きブレークポイントの設定

 特定の変数やオブジェクトに注目して監視することもできる。右フレームの[新しい監視点...]の部分をクリックし、図4のように監視したい変数名などを入力する。[Enter]キーを押すと監視点が設定されて、図5のようにその変数の値が常に表示されるようになる。これによって変数の値をリアルタイムに知ることができる。

図4 新しい「監視点」として変数を指定 図4 新しい「監視点」として変数を指定
図5 監視点の値がリアルタイムに表示される 図5 監視点の値がリアルタイムに表示される