Chrome DevToolsでjavascriptをデバッグする際に忘れてはいけない大切な事

5650 ワード
JavaScript debugger ChromeDevTool JavaScript テキストリンク

Chrome DevToolsはとてもとても便利で、毎日お世話になっている神ツールです。
単純なHTMLの解析からGPUの使用具合というマニアックな情報まで色々確認出来ますが、その中でデバッグの時に設定しておく事で、ちょっとしたミスを減らして問題にすぐ気付ける設定が１つあります。

javascriptエラーが発生した場合にエラーを補足しBreakする

Sourceタブを選択した場合に、左下にメニューがあります。

その中の機能としてボタンっぽいがあります。
これを、1回クリックします。するとという感じで色が変わります。次にもう一度クリックします。するとこんな感じで色がまた変わります。

これらを設定しておくと、javascript実行時に発生したエラーをDevToolが検知してBreakしてくれるので、すぐに問題のあるコードに気がつく事が出来、ミスにすぐ気がつく事が出来ます。

Pause on Exceptionに関して

の状態を指します。詳細は公式サイトのPause on Exception を確認してください。
簡単に言うと例外が発生した場合にDevToolが感知して該当箇所でBreakされた状態になります。

例えばこのようなコードがあった場合、Pause on Exceptionを有効にしていればa.a();の部分とa.b()の部分でBreakされデバッガーが起動します。

<html>
  <head>
    <script type="text/javascript" charset="utf-8">

      var onFail = function() {
        a.a();
      };

      var onTryCactch = function() {
        try {
          a.b();
        } catch(e) {
          console.log(e);
        }
      };

    </script>
  </head>
  <body>
    <input type="button" name="" value="test1" onclick="onFail()">
    <input type="button" name="" value="test2" onclick="onTryCactch()">
  </body>
</html>

Pause on Uncaugh Exceptionに関して

の状態を指します。詳細は公式サイトのPause on Uncaugh Exception を確認してください。
簡単に言うと、try…catchで囲まれていない例外が発生した場合にDevToolが感知して該当箇所でBreakされた状態になります。

上記の例で言うと、Pause on Uncaugh Exceptionを有効にしていた場合、a.a();ではBreakされますが、a.b()ではBreakされません。

というわけで

自分の場合は、デバッグする際にはの状態にしておいて、予期せぬ例外が発生した場合にすぐに気がつけるようにしてあります。
なおtry…catchを検知しないようにしているのは、実装時に既に考慮しているため不要だからです。