JavaScript デバッグの仕方 (2)
デバッグの仕方(1) からの続きです。ブレイクポイントとステップ実行
プログラミングでは、 文法的には誤りのないプログラムでも処理の仕方がまずいため 期待通りの動作をしないことがよく起こります。 小さなプログラムでは console.log() でログを表示して調べるぐらいで間に合いますが、 大きなプログラムになると console.log() だけでは効率が悪い話も出てきます。 このようなときに ブレイクポイント や ステップ実行 などの機能を使って 誤動作の原因を調べます。
ブレイクポイント
動作中のプログラムを一時的に止めます。 プログラムソースの調べたい箇所にブレイクポイントを設定して プログラムの動作を止め、 そのときの変数の値を眺めて誤った値が入っていないか調べます。
ステップ実行
プログラムを1行ずつ実行します。 if やループなどで処理がどのように実行され、 変数がどのように変化していくかを調べます。 ステップイン、ステップオーバー などいろいろな実行の仕方があります。
Firefox の例
下の絵は Firefox77 のデバッガの画面です。
- デバッガ画面の左側のツリーで ソースファイルを選択してコードを表示します。
- 図(1) の行番号をクリックするとブレイクポイントが設定されます。 プログラムを一時停止させたい場所に設定します。 もう1度クリックするとブレイクポイントが解除されます。
- プログラムを実行するとブレイクポイントで一時停止状態になります。 図(2) の画面でブロックや実行中の関数名を開くと、 そこで使用されている変数の内容を見ることができます。 誤った値が入っていないかなどを確認できます。
- 図(3)のボタンでプログラムをステップ実行することができます。
ステップ実行
復帰 ボタンは、次のブレイクポイントがある場所まで実行します。
例えば、for ループの中の場合、for 内で 1周して再び同じ場所で一時停止します。
ループを抜け出すと、次のブレイクポイントがある場所まで実行します。
次のブレイクポイントがない場合はプログラムの最後まで実行します。
ステップオーバー ボタンは、基本は 1行単位でプログラムを実行します。
関数呼び出しがある行では 1回のクリックでその関数の処理を完了します。
ステップイン ボタンも1行単位でプログラムを実行します。
ステップオーバーとの違いは、
関数呼び出しがあるとその関数の内部のコードに移動して、
そちらを 1行ずつ実行します。