JavaScript のブレークポイント
この記事では、ブレークポイントの使用法と利点、および debugger キーワードとブラウザーのデバッガーモードを使用して JavaScript コードをデバッグする方法について説明します。
ブレークポイント
ほとんどの場合、プログラムコードには論理構文エラーがほとんど含まれておらず、プログラムは指定されたステートメントに従って目的の結果を提供していません。したがって、エラーを解決してプログラムコードをデバッグするには、実行を停止し、各ステップで実行フローを確認する必要があります。
プログラムではブレークポイントを使用して実行を停止します。さまざまなプログラミング言語には、特にブレークポイントキーワードが含まれています。
ほとんどの場合、エラーはエラーメッセージやログを表示しないため、ブレークポイントキーワードはコードの実行時に実行を停止し、実際の問題が何であるかを確認する必要があります。
JavaScript のブレークポイント
デバッグはトリッキーなプロセスであり、現在、ほとんどのブラウザーには組み込みの JavaScript デバッガーが用意されています。デバッガーでブレークポイントを設定し、実行を停止する必要がある場所を定義できます。
コードの実行中に実行時に変数値を調べることができます。
F12キーを押してブラウザでデバッグをアクティブにし、デバッガメニューから[コンソール]セクションを選択します。ブラウザがデバッグをサポートしている場合は、console.log() メソッドを使用して値を表示および確認できます。
コンソールの例：
<!DOCTYPE html>
<html>
<body>
<h1>Delftstack learning</h1>
<h2>JavaScript debugger keyword example</h2>
<p>You can on debugger with F12 key and select console in debugger menu.</p>
<script>
a = 2;
b = 4;
sum = a + b;
console.log(c); // it will display the value of sum variable
</script>
</body>
</html>
上記の HTML ソースでは、console.log() デフォルトメソッドを使用して、変数 a と b の合計を表示しています。デバッガモードのログインコンソールセクションが表示されます。
JavaScript コードのデバッガーウィンドウでブレークポイントを設定できます。実行は各ブレークポイントで停止されます。これは、JavaScript 値の調査に役立ちます。デバッガウィンドウの再生ボタンで実行を再開できます。
JavaScript の Debugger キーワード
JavaScript の debugger キーワードは、実行を停止するためにコードステートメントで使用されます。デバッガーでブレークポイントを設定するのと同じ機能を実行します。
デバッガーの例：
<!DOCTYPE html>
<html>
<body>
<h1>Delftstack learning</h1>
<h2>JavaScript debugger keyword example</h2>
<p id="test"></p>
<p>You can on debugger and see the execution will be stop at third line.</p>
<script>
let sum = 15 + 5;
debugger; // to stop execution
document.getElementById("test").innerHTML = sum;
</script>
</body>
</html>
上記の HTML ソースでは、JavaScript コードで debugger キーワードを使用して実行を停止し、getElementById("id").innerHTML を使用して段落に sum 変数を割り当てています。