ステップイン、ステップアウト、ステップオーバーの違い

エンジニア初心者の時に上司に「デバックして動き確認しといて」と言われ、何もブレークポイントを置かずにただ画面上の動きを確認していました。
※ブレークポイントを置いた行で、強制的に処理を中断することが出来ます。

そこで初めて「ステップイン、ステップアウト、ステップオーバー」を知り、感動したことを覚えています。ただ、最初の頃はよくこの3つの違いが分からず、全部ステップインでデバックしていて、F11をとにかく連打していました。
（※Visual StudioではF11がステップインのキーとなります。）

その様子を見た上司は、「ゲームじゃないんだから、、」と呆れていましたね。
僕と同じ恥ずかしい思いをしてほしくなく、これからデバックを学ぶ人向けに書いていきます。

こちらの記事は当時参考にした以下の記事を元に書いています。
参考記事

前提として、以下のようなファイルを想定し、「main → parent → child」という順番で関数が動くような処理を行う状態です。

debug.js

//main関数がまず動く
function main() {
	console.log("main: start");
	//parent関数が動く
	parent();
	console.log("main: end");
}

function parent(){
	console.log("parent: start");
	//child関数が動く
	child(); //ここにブレークポイントを置いた場合
	console.log("parent: end");
}

function child(){
	console.log("child: start");
	console.log("child: end");
}

このファイルを元に「ステップイン、ステップアウト、ステップオーバー」の違いを解説していきます。関数parentの中にある関数childの行にブレークポイントを置いた場合、以下のような動きになります。

• ステップイン：関数childの中に入り、関数childの1行目へ移動
• ステップアウト：関数parentを抜け、関数mainの最終行へ移動
• ステップオーバー：関数childの中に入らず、次の行へ移動

1つ1つ解説していきます。

ステップイン

debug.js

function main() {
	console.log("main: start");
	parent();
	console.log("main: end");
}

function parent(){
	console.log("parent: start");
	child(); //ここにブレークポイントを置いた場合
	console.log("parent: end");
}

function child(){
	console.log("child: start"); //ステップインだとここに移動
	console.log("child: end");
}

Step "In"なので、関数childの中に入っていきます。
次にフォーカスが当たるのが関数childの最初の行になります。

デバッガーは、呼び出された関数の最初の行でプログラムの実行を一時停止し、その関数内のコードを調査できるようにします。

ステップアウト

debug.js

function main() {
	console.log("main: start");
	parent();
	console.log("main: end");//ステップアウトだとここに移動
}

function parent(){
	console.log("parent: start");
	child(); //ここにブレークポイントを置いた場合
	console.log("parent: end");
}

function child(){
	console.log("child: start");
	console.log("child: end");
}

Step "Out"なので、今いる関数の外に出ようとします。
次にフォーカスが当たるのが関数mainの最終行になります。

デバッガーは現在の関数を終了するまでプログラムの実行を継続します。

これにより、現在の関数の残りの行をスキップして、呼び出し元に戻ることができます。

ステップオーバー

debug.js

function main() {
	console.log("main: start");
	parent();
	console.log("main: end");
}

function parent(){
	console.log("parent: start");
	child(); //ここにブレークポイントを置いた場合
	console.log("parent: end");//ステップオーバーだとここに移動
}

function child(){
	console.log("child: start");
	console.log("child: end");
}

デバッガーはコードの現在の行を「スキップ」し、次の行で一時停止します。

Step "Over"なので、今いる関数を超えてジャンプするイメージです。

次にフォーカスが当たるのが関数parent内にある関数childの次の行になります。

まとめ

いかがだったでしょうか。

• ステップイン：関数childの中に入り、関数childの1行目へ移動
• ステップアウト：関数parentを抜け、関数mainの最終行へ移動
• ステップオーバー：関数childの中に入らず、次の行へ移動

デバッグ処理は、プログラム最適化、開発時間の短縮、信頼性向上、メンテナンス容易性の観点から、ソフトウェア開発において重要であり、品質向上と効率化を促進します。

ステップ処理をマスターして、つよつよエンジニアへ近づいていきましょう。