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

杉山貴章(オングス)
2008-11-13 17:00:00
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

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

図4 新しい「監視点」として変数を指定 図4 新しい「監視点」として変数を指定
図5 監視点の値がリアルタイムに表示される 図5 監視点の値がリアルタイムに表示される
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]