JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのdebuggerステートメントの使い方を徹底解説

JavaScriptのdebuggerステートメントは、コード内にブレークポイントを設定するための構文です。実行中のコードがdebuggerステートメントに到達すると、その時点で処理が一時停止し、開発者ツールのデバッガーが利用可能であれば自動的にデバッガー機能が呼び出されます。

debuggerステートメントの基本動作

debuggerステートメントは、以下のような場面で特に役立ちます。

  • コードの特定の箇所で処理を止めて、変数の値を確認したいとき
  • ループ処理の各ステップを詳細に追跡したいとき
  • 複雑なロジックの不具合原因を特定したいとき

なお、ブラウザの開発者ツール（DevTools）が開いていない状態では、debuggerステートメントは何も行いません。デバッグを有効にするには、あらかじめ開発者ツールを開いておく必要があります。

実装例

以下は、JavaScriptでdebuggerステートメントを実装したコード例です。ボタンをクリックするとprintTable()関数が呼び出され、ループ処理内でdebuggerステートメントが実行されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>debuggerステートメントの例</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptのdebuggerステートメント</h1>
<div class="result"></div>
<br />
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックしてprintTable()関数を呼び出します</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function printTable(num) {
        for (let i = 1; i <= 10; i++) {
            debugger;
            resEle.innerHTML += i + " ";
        }
    }
    BtnEle.addEventListener("click", () => {
        printTable();
    });
</script>
</body>
</html>

実行結果

「ここをクリック」ボタンを押すと、printTable()関数が実行され、ループの1回目でdebuggerステートメントに到達した時点で処理が停止します。

JavaScriptのdebuggerステートメントの使い方を徹底解説

その後、ブラウザの開発者ツール（デバッガー）を開くと、以下のようにdebuggerステートメントの位置で実行が一時停止していることを確認できます。

JavaScriptのdebuggerステートメントの使い方を徹底解説

まとめ

debuggerステートメントを使えば、コードに直接ブレークポイントを埋め込むことができ、開発者ツールと組み合わせることで変数の状態や処理の流れを効率的に確認できます。本番環境にデプロイする前に、debuggerステートメントを削除または無効化しておくことを忘れないようにしましょう。


  1. JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

    JavaScriptのwithステートメントは、特定のプロパティに対してデフォルトのオブジェクトを指定し、冗長になりがちなオブジェクト参照の記述を省略するための構文です。withブロック内で指定したオブジェクトは、スコープチェーンの先頭に追加されるため、そのプロパティ名だけで直接アクセスできるようになります。 基本的な動作 通常、オブジェクトのプロパティにアクセスするには、毎回オブジェクト名を明示する必要があります。しかし、withステートメントを使えば、以下のようにコードを簡潔に書けます。 オブジェクト名の繰り返し記述を省略できる 同じオブジェクトの複数のプロパティへ短くアクセスできる 指

  2. 【初心者向け】JavaScriptのcontinueステートメントの使い方を解説

    continueステートメントとはJavaScriptのcontinueステートメントは、ループ処理の中で特定の条件が満たされた場合に、その回の処理（イテレーション）をスキップし、次の反復へ処理を移すために使用されます。breakステートメントがループ自体を抜けるのに対し、continueはあくまで「その回だけ」を飛ばしてループを継続する点が特徴です。この仕組みにより、不要なデータを除外しながら効率的に繰り返し処理を行うことができます。continueステートメントの実装例以下は、1から30までの数値の中から偶数のみを出力するサンプルコードです。奇数の場合にcontinueを使って処理をスキッ