JavaScriptの処理をブラウザ上で止めてデバッグする方法

本記事では、JavaScriptの処理をブラウザ上で止めて、
デバッグする方法について紹介していきます。

本記事の内容です。

JavaScriptのソースコードに一文加える

JavaScriptのソースコード内に、
debugger;
という一文を加えます。
すると、後述するブラウザの開発者ツールを開いた状態で、
debugger; の所で処理を止めることができます。
(ブレークポイントを設定した時と同じ動きになります。)

$(function() {
    // 下記の debugger; という一文を加えると、
    debugger; // 処理がここで止まる
    alert('debug!');
});

ブラウザの開発者ツールを開く

ブラウザを開き、F12を押し、開発者ツールを開きます。
その後、該当するJavaScriptの処理を実行させると、
debugger; の所で処理が止まり、そこからステップ実行等行えるようになります。
後は状況に応じてF10でステップ実行するなり、
F11で関数内にステップインするなり、
F8で処理を実行するなり、ご自由にどうぞ。