お疲れ様です。岩木です。最近デバッグについて体系的に網羅している書籍を読んで、非常に良い知見を得れた気がするので、振り返りも兼ねて投稿することに決めました。今回はデバッガに焦点を当てて
初学者向けに書いていこうと思います。
デバッガで出来ること
プログラムの実行中に特定の箇所で処理を中断することが出来ます。
中断したプログラムは待機状態になって、その時点で変数の値を確認したり、新しいコードを書いて実行することが可能になります。
プレークポイント
ブレークポイントとは、実行中のプログラムを任意の箇所で、一時停止させる機能のことです。
以下、JavaScriptを例にブラウザのデベロッパーツールを使って解説をします。
<!DOCTYPE html>
<html>
<head>
<title>ブレークポイント</title>
</head>
<body>
<script>
const a = 1;
const b = 2;
const c = 3;
console.log(a);
console.log(b);
console.log(c);
</script>
</body>
</html>
例えば、上記のコードで試してみると、デベロッパーツールのコンソールタブを確認すると
以下のように「1,2,3」と出力されます。
ここに処理を止めたい箇所の行数をクリックするとブレークポイントが設定できる。
（以下の画像の赤枠の部分）
上記の状態で先ほどと同様にコンソールタブを確認すると
以下のように「1」しか表示されなくなります。
再開するには以下の青い矢印ボタンを押すと再開されます。
ブレークポイントはデバックをする時に非常に重宝されると思うので、デバッグをする際は試してみて下さい。
ステップ実行
ステップ実行とはプログラムの実行を逐一進め、コードの実行状況や変数の値を詳細に監視しながら、プログラムの挙動を理解し、バグを特定するための操作のことです。
今回は「ステップイン」「ステップオーバー」「ステップアウト」について
簡単に説明しようと思います。
（左がステップオーバー、真ん中がステップイン、右がステップアウト）
以下のサンプルコードを用いてそれぞれ説明します。
<!DOCTYPE html>
<html>
<head>
<title>ステップ実行</title>
</head>
<body>
<script>
function add(a, b) {
const sum = a + b;
return sum;
}
function multiply(a, b) {
const product = a * b;
return product;
}
function calculate() {
const x = add(1, 2);
const y = multiply(3, 4);
console.log(x, y);
}
calculate();
</script>
</body>
</html>ステップイン
ステップインとはプログラムを一つずつステップ実行することです。
こちらの動作では、関数やメソッドの内部に入っていきます。
<!DOCTYPE html>
<html>
<head>
<title>ステップイン</title>
</head>
<body>
<script>
function add(a, b) {
const sum = a + b; //1番目の実行
return sum; //２番目の実行
}
function multiply(a, b) {
const product = a * b; //３番目の実行
return product; //４番目の実行
}
function calculate() {
const x = add(1, 2); //プレークポイントを設定
const y = multiply(3, 4);
console.log(x, y); //5番目の実行
}
calculate();
</script>
</body>
</html>ステップオーバー
ステップオーバーは、現在の行または現在の関数内で実行されているコードを一つずつステップ実行
することです。
こちらの動作では、関数呼び出しを一つのステップとして扱い、その内部の詳細を見ずに
実行を続けます。
<!DOCTYPE html>
<html>
<head>
<title>ステップオーバー</title>
</head>
<body>
<script>
function add(a, b) {
const sum = a + b;
return sum;
}
function multiply(a, b) {
const product = a * b;
return product;
}
function calculate() {
const x = add(1, 2); //プレークポイントを設定
const y = multiply(3, 4); //1番目の実行
console.log(x, y); //2番目の実行
}
calculate();
</script>
</body>
</html>ステップアウト
ステップアウトは、現在の関数の内部から抜け出し、呼び出し元のコードに戻る動作のことです。
こちらの動作では、関数の内部でステップ実行の必要がなくなった場合、ステップアウトをすると、関数の外側に抜け出すことができます。
<!DOCTYPE html>
<html>
<head>
<title>ステップアウト</title>
</head>
<body>
<script>
function add(a, b) {
const sum = a + b; //ステップアウトを実行
return sum; //ここがスキップされる。
}
function multiply(a, b) {
const product = a * b;
return product;
}
function calculate() {
const x = add(1, 2); //ブレークポイントを設定
const y = multiply(3, 4);
console.log(x, y);
}
calculate();
</script>
</body>
</html>それぞれの使用用途
ステップイン
全てのコードを1行ずつ丁寧に確認したい場合に使用する。
ステップアウト
ステップインと同様に1行ずつ確認するが、関数の内部に入らないので、処理の詳細ではなく
全体の流れを確認したい時に使用する。
ステップアウト
ステップインで、デバッグが必要ない関数に入ってしまった時に
関数の外に抜け出すために使用する。
最後に
簡単にしか説明していませんが、デバッガはデバッグする上で非常に大事なツールだと思いますので
もしこの記事を見て参考になる方が一人でもいらっしゃれば幸いです。失礼します。