【chrome】デベロッパーツールのデバック操作について

chrome でデベロッパーツールのデバック操作を行う際に以下の違いがよくわかっていなかったことがあったので、ここにメモします。

• step over next function call
• step into next function call
• step out next currnt function
• step

Step Over Next Function Call (ステップオーバー)

意味

現在の行で関数が呼び出されている場合、その関数の中身には入らずに実行を進める。

動作

関数呼び出しを一度に実行し、関数の結果が返ってきた後の次の行に移動する。

使用例

関数内部の詳細を見たくない場合、外部の関数が正しく動作する前提でデバッグを進めたい場合に利用するそうです。

Step Into Next Function Call (ステップイン)

意味

現在の行で関数が呼び出されている場合、その関数の中に入って詳細な処理を見る。

動作

呼び出された関数の最初の行に移動し、その中でさらにデバッグを続ける。

使用例

関数の中で何が行われているか詳しく確認したい場合に利用します。

Step Out of Current Function (ステップアウト)

意味

現在デバッグ中の関数を最後まで実行し、その関数を呼び出した元の位置に戻る。

動作

現在の関数の処理を全て完了させ、呼び出し元の関数の次の行に移動する。

使用例

関数の中での詳細なデバッグが不要になり、上位のコードに戻りたい場合に利用します。

Step (ステップ)

意味

現在の行を実行し、その次の行に移動する。

動作

条件分岐やループ、関数呼び出しなども含めて1行ずつ順番に進む。関数呼び出しの場合、その中に入る。

使用例

プログラムの処理を1行ずつ追跡してデバッグを進めたい場合に利用します。

例

以下のコードをデバックする場合どうなるか。。。

function add(a, b) {
    return a + b;
}

function main() {
    let x = 10;
    let y = 20;
    let result = add(x, y); // <-- 現在この行をデバッグ中
    console.log(result);
}

main();

状況: let result = add(x, y); にブレークポイントがある場合

Step Over	add(x, y) の中には入らず、次の行 console.log(result) に移動
Step Into	add 関数の中に入り、return a + b; の行に移動
Step Out	add 関数の中にいる場合、最後まで実行して呼び出し元の console.log(result) に戻る
Step	1行ずつ実行。関数呼び出しの際は自動的に中に入る

まとめ

• Step Over: 関数を飛ばして結果だけ見る。
• Step Into: 関数内に入って詳細を調査。
• Step Out: 関数から抜けて上位に戻る。
• Step: 単純に1行ずつ進む。