JavaScriptの処理をブラウザ上で止めてデバッグする方法
本記事では、JavaScriptの処理をブラウザ上で止めて、
デバッグする方法について紹介していきます。
本記事の内容です。
JavaScriptのソースコードに一文加える
JavaScriptのソースコード内に、debugger;
という一文を加えます。
すると、後述するブラウザの開発者ツールを開いた状態で、
debugger; の所で処理を止めることができます。
(ブレークポイントを設定した時と同じ動きになります。)
$(function() { // 下記の debugger; という一文を加えると、 debugger; // 処理がここで止まる alert('debug!'); });
ブラウザの開発者ツールを開く
ブラウザを開き、F12を押し、開発者ツールを開きます。その後、該当するJavaScriptの処理を実行させると、
debugger; の所で処理が止まり、そこからステップ実行等行えるようになります。
後は状況に応じてF10でステップ実行するなり、
F11で関数内にステップインするなり、
F8で処理を実行するなり、ご自由にどうぞ。