JSLintオプション考察「debugger statements」

2013年06月27日

カテゴリー:

JavaScriptには「debuggerステートメント」というものがあります。debuggerステートメントはJavaScriptの言語の一部というよりは、console や alert 等と同様、ブラウザで利用できる機能の一部だと思われます。また、debuggerステートメントを有効にするには、ブラウザのデバッガを起動しておく必要があります。
(JavaScriptのデバッグについては、改めて別エントリで紹介しようと思います。)

コード内にこのdebuggerステートメントを記述しておくと、処理がそこに到達した段階で処理が「一時停止」されます。中止ではなく一時停止なので、変数の状態などは全て保持されるため、一時停止したところから再開させることもできます。一時的に処理を停止させておき、その状態で変数の内容を確認したりすることができるので非常に便利です。

debuggerステートメントは例えば以下の様に記述することができます。

(function func() {
    "use strict";
    var i = 0,
        max = 10;

    for (i = 0; i < max; i++) {
        window.console.log(i);
        debugger;  //Unexpected 'debugger'
    }
}());

このオプションがデフォルト(false)の場合、上記のコードの8行目で「Unexpected ‘debugger’」という警告が出ます。
このオプションを true にすれば警告は消えますが、debuggerステートメントはあくまでもデバッグ目的の一時的なコードとして利用されるはずなので、最終的には削除(またはコメントアウト)されるべきものだと思います。 そういう意味では、debuggerステートメントの削除または消し忘れを防止するためにも、ここはデフォルト(false)のままにしておいた方が良いでしょう。

ちなみに、最近のブラウザのデバッガの場合、このようなdebuggerステートメントを記述しなくても、デバッガ上でブレークポイントを設定するだけで良かったりもします。
次の画像はChromeでデバッガを起動し、ブレークポイントを設定した時のスクリーンショットです。

ブレークポイントの例(Chromeの場合)

上の例ではdebuggerステートメントは特に使用せず、代わりにブレークポイントを設定しています。このように、ブラウザの機能としてブレークポイントが使用できる場合、debuggerステートメントはコードを汚すだけのものになってしまうので、個人的な見解としては、debuggerステートメントを記述するのではなく、ブラウザのデバッガのブレークポイントを使用すべきだと思います。

JSLintのオプション一覧ページへ