変数の確認

ブレークポイントでプログラムの実行を止めると、プログラム内の変数の現在の状態を見ることができます。変数の状態を把握することで、処理が期待どおり動作しているか確認することは大事です。

これまで変数の値を確認したい場合、ソースコードにalert()関数やconsole.log()関数を書いていた人もいると思います。このブレークポイント機能を使用すればソースコードを編集することなく、ブラウザ上で任意の変数を確認できます。

マウスを重ねれば、変数の値を確認できる

変数上にマウスポインターを乗せることで変数の値の確認が可能です。数値や文字列などの簡単な情報であればこの簡易的な表示で十分でしょう。

スコープ内の変数の値を、一覧で確認できる

複雑なオブジェクトの変数の詳細を確認したい場合、[Scope]パネルが役に立ちます。ここに現在実行中のJSのスコープの変数が表示されます。関数内のローカル変数であれば、Localツリーに表示されます。

複雑な階層の変数はWatchを使おう

関数内で使用されている変数が多かったり、オブジェクトの深い階層の変数を確認したい場合は[Watch]パネルを使用します。[Watch]パネルに変数名を入力することで、変数の状態を表示できます。[+]ボタンをクリックして、監視したい変数の名前をいれましょう。

次のページではブレークポイントで止まったプログラムをステップ実行し、デバッグする方法を解説します。