ステップイン、ステップアウト、ステップオーバーの違い
ステップイン、ステップアウト、ステップオーバーの違い
エンジニア初心者の時に上司に「デバックして動き確認しといて」と言われ、何もブレークポイントを置かずにただ画面上の動きを確認していました。
※ブレークポイントを置いた行で、強制的に処理を中断することが出来ます。
そこで初めて「ステップイン、ステップアウト、ステップオーバー」を知り、感動したことを覚えています。ただ、最初の頃はよくこの3つの違いが分からず、全部ステップインでデバックしていて、F11をとにかく連打していました。
(※Visual StudioではF11がステップインのキーとなります。)
その様子を見た上司は、「ゲームじゃないんだから、、」と呆れていましたね。
僕と同じ恥ずかしい思いをしてほしくなく、これからデバックを学ぶ人向けに書いていきます。
こちらの記事は当時参考にした以下の記事を元に書いています。
参考記事
前提として、以下のようなファイルを想定し、「main → parent → child」という順番で関数が動くような処理を行う状態です。
//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つ解説していきます。
ステップイン
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の最初の行になります。
デバッガーは、呼び出された関数の最初の行でプログラムの実行を一時停止し、その関数内のコードをt調査できるようにします。
ステップアウト
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の最終行になります。
デバッガーは現在の関数を終了するまでプログラムの実行を継続します。
これにより、現在の関数の残りの行をスキップして、呼び出し元に戻ることができます。
ステップオーバー
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の中に入らず、次の行へ移動
デバッグ処理は、プログラム最適化、開発時間の短縮、信頼性向上、メンテナンス容易性の観点から、ソフトウェア開発において重要であり、品質向上と効率化を促進します。
ステップ処理をマスターして、つよつよエンジニアへ近づいていきましょう。
Discussion