実は恥ずかしながら、これまでjsをデバッグする際にconsole.logに出力したりalertで表示したりしていました。 本日購入した「Javascript本格入門」ではChromeのデベロッパーツールを使って のデバッグ方法が書いてあったので試してみました。
Stackoverflowにわかりやすい説明があったので記載します：
ステップインは、現在の行にメソッドコールがある場合、そのメソッドの中に移動します。もし、複数のメソッドが呼ばれている場合は実行順に移動します。メソッドコールが無い場合はステップオーバーと同じです。ステップインは、インタープリターがソースを１行１行実行するのを追うのに似ています。
ステップオーバーは現在のスコープの次の行に移ります。しかしその際、メソッドコールがあった場合、メソッドを実行しますがデバッガの位置がメソッドの中に移動しません。ステップオーバーは特定のメソッドのロジックを追いたいが、中身の細かな点については興味がない場合に利用します。ステップオーバーはどの時点において期待している条件への違反が発生したかを追うのに便利です。
ステップアウトは次のreturnもしくはreturn相当まで進みます。つまり、制御が前のスタックに戻るまでです。
ステップアウトは現時点・現在のメソッドでの調査が終わり、値が利用されているスタックの元の場所に戻るのに利用します。
仮に以下のコードがあり、mainからbarが呼ばれ、
現在、関数barの１行目を実行中だとする：
function main() {
val s = foo();
bar(s);
}
function foo() {
return "hi";
}
function bar(s) {
val t = s + foo(); // デバッガにおける現在の位置
return t;
}
ステップインを行った場合
デバッガの位置はfoo関数の１行目、つまりreturn "hi"と書いてある行に移ります。
次にステップアウトをすると、デバッガの位置はfooの呼び出し元の次の行である
bar関数の２行目（return tの場所）に移ります。
ステップオーバーを行った場合
デバッガの位置はbar関数の次の行、つまりreturn tに移ります。
次にステップアウトすると、デバッガの位置はmain関数の最後の行に移ります。
