JavaScript-デバッグ

時々、開発者はコーディング中に間違いを犯します。プログラムまたはスクリプトの間違いは、「バグ」と呼ばれます。

バグを見つけて修正するプロセスは*デバッグ*と呼ばれ、開発プロセスの通常の部分です。このセクションでは、タスクのデバッグに役立つツールとテクニックについて説明します。

IEのエラーメッセージ

エラーを追跡する最も基本的な方法は、ブラウザでエラー情報をオンにすることです。デフォルトでは、ページでエラーが発生すると、Internet Explorerのステータスバーにエラーアイコンが表示されます。

エラーアイコン

このアイコンをダブルクリックすると、発生した特定のエラーに関する情報を表示するダイアログボックスが表示されます。

このアイコンは見落としやすいため、Internet Explorerには、エラーが発生したときにエラーダイアログボックスを自動的に表示するオプションがあります。

このオプションを有効にするには、[ツール]→[インターネットオプション]→[詳細設定]タブを選択し、最後に*「すべてのスクリプトエラーに関する通知を表示する」*オプションを以下のようにチェックします-

インターネットオプション

FirefoxまたはMozillaのエラーメッセージ

Firefox、Netscape、Mozillaなどの他のブラウザは、 JavaScript Console または Error Consol と呼ばれる特別なウィンドウにエラーメッセージを送信します。コンソールを表示するには、[ツール]→[エラーコンソールまたはWeb開発]を選択します。

残念ながら、これらのブラウザはエラーが発生したときに視覚的な表示を提供しないため、コンソールを開いたままにして、スクリプトの実行中にエラーを監視する必要があります。

エラーコンソール

エラー通知

コンソールまたはInternet Explorerのダイアログボックスに表示されるエラー通知は、構文エラーとランタイムエラーの両方の結果です。これらのエラー通知には、エラーが発生した行番号が含まれます。

Firefoxを使用している場合は、エラーコンソールで利用可能なエラーをクリックして、エラーのあるスクリプトの正確な行に移動できます。

スクリプトをデバッグする方法

JavaScriptをデバッグするにはさまざまな方法があります-

JavaScript検証ツールを使用する

JavaScriptコードに奇妙なバグがないかどうかを確認する1つの方法は、それが有効であり、言語の公式の構文規則に従っているかどうかを確認するプログラムを実行することです。これらのプログラムは validating parsers または単に validators と呼ばれ、多くの場合、商用のHTMLおよびJavaScriptエディターが付属しています。

JavaScriptの最も便利なバリデーターは、http：//www.jslint.com/[Douglas Crockford’s JavaScript Lint]から無料で入手できるDouglas CrockfordのJavaScript Lintです。

そのWebページにアクセスし、JavaScript（JavaScriptのみ）コードを提供されたテキスト領域に貼り付け、jslintボタンをクリックするだけです。このプログラムはJavaScriptコードを解析し、すべての変数と関数の定義が正しい構文に従っていることを確認します。また、ifや while などのJavaScriptステートメントもチェックして、それらが正しい形式に従っていることを確認します

デバッグコードをプログラムに追加する

プログラムで* alert（）または document.write（）*メソッドを使用して、コードをデバッグできます。たとえば、あなたは次のように何かを書くかもしれません-

var debugging = true;
var whichImage = "widget";

if( debugging )
   alert( "Calls swapImage() with argument: " + whichImage );
   var swapStatus = swapImage( whichImage );

if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

表示される* alert（）*の内容と順序を調べることにより、プログラムの状態を非常に簡単に調べることができます。

JavaScriptデバッガーを使用する

デバッガーは、スクリプト実行のすべての側面をプログラマーの制御下に置くアプリケーションです。デバッガーは、実行のフローを制御するだけでなく、値を調べて設定できるインターフェイスを介して、スクリプトの状態をきめ細かく制御します。

スクリプトがデバッガにロードされると、一度に1行ずつ実行するか、特定のブレークポイントで停止するように指示できます。実行が停止すると、プログラマはスクリプトとその変数の状態を調べて、何かがおかしいかどうかを判断できます。変数の値の変化を監視することもできます。

MozillaおよびNetscapeの両方のブラウザー用のMozilla JavaScriptデバッガー（コード名Venkman）の最新バージョンは、http：//www.hacksrus.com/~ginda/venkmanからダウンロードできます。

開発者向けの便利なヒント

スクリプト内のエラーの数を減らし、デバッグプロセスを簡素化するには、次のヒントを念頭に置いてください-

たくさんの*コメント*を使用してください。コメントを使用すると、スクリプトを書いた理由を自分のやり方で説明したり、特に難しいコードのセクションを説明したりできます。
コードを読みやすくするために、常に*インデント*を使用してください。文をインデントすると、開始タグと終了タグ、中括弧、その他のHTMLおよびスクリプト要素を簡単に一致させることができます。
*モジュラーコード*を書きます。可能な限り、ステートメントを関数にグループ化します。関数を使用すると、関連するステートメントをグループ化し、最小限の労力でコードの一部をテストおよび再利用できます。
変数と関数の命名方法に一貫性を持たせてください。意味があり、変数の内容または関数の目的を説明するのに十分な長さの名前を使用してみてください。
変数と関数に名前を付けるときは、一貫した構文を使用してください。つまり、すべて小文字またはすべて大文字のままにしてください。キャメルバック表記を好む場合は、一貫して使用してください。
*モジュール形式で長いスクリプト*をテストします。つまり、スクリプトの一部をテストする前に、スクリプト全体を書こうとしないでください。コードの次の部分を追加する前に、ピースを作成して動作させる。
*説明的な変数名と関数名*を使用し、単一文字の名前を使用しないでください。
引用符を見る。引用符は文字列を囲むペアで使用され、両方の引用符は同じスタイル（単一または二重）でなければならないことに注意してください。
等号に注意してください。比較のために単一の=を使用しないでください。
var キーワードを使用して、*変数を明示的に宣言します。

Javascript-debugging

目次