JSFiddleでJavaScriptにブレークポイントを設定する方法

この記事は公開から4年以上経過しています。

WEB開発でアイディアを具現化するときに便利なJSFiddleで、JavaScriptにブレークポイントを設定してブラウザでスクリプトデバッグを行なう方法を紹介します。

対応

JavaScriptのブレークさせたい位置にdebuggerステートメントを埋め込みます。

サンプルソースコード

例を挙げるまでも必要ないと思いますが…。

$(function () {
    debugger;  // ブレークしたい場所に記述
});

以下はChromeの例ですが、開発者ツールを起動した状態で上記コードが実行されると、以下のようにブレークします。ちなみに、開発者ツールが表示されていないと何も起こりません。

試してみたい場合はこちらに上記コードのJSFiddleリンクを貼っておきますので参考にしてみてください。開発者ツールを起動した状態でJSFiddleの▷Runを押すとブレークするのが確認出来ると思います。

参考ウェブサイトなど

• moz://a MDN web docs
  debuggerステートメント

以上です。