ES6-デバッグ

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

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

IEのエラーメッセージ

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

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

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

このオプションを有効にするには、[ツール]→[インターネットオプション]→[詳細設定]タブを選択し、次のスクリーンショットに示す[ NotificationaboutEvery Script Error を表示する]ボックスオプションを最後にオンにします。

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

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

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

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

エラーコンソール

エラー通知

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

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

スクリプトのデバッグ

JavaScriptをデバッグするにはさまざまな方法があります。以下にいくつかの方法を示します。

JavaScript検証ツールを使用する

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

JavaScriptの最も便利なバリデーターは、Douglas Crockfordの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 [www.hacksrus.com/~ginda/venkmanからダウンロードできます。 ]。

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

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

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

Node.jsを使用したデバッグ

Node.jsには、フル機能のデバッグユーティリティが含まれています。これを使用するには、デバッグ引数に続いてデバッグするスクリプトへのパスを指定してNode.jsを起動します。

node debug test.js

デバッガーが正常に開始されたことを示すプロンプトが起動します。

指定した場所にブレークポイントを適用するには、次のコードに示すように、ソースコードでデバッガーを呼び出します。

//myscript.js
x = 5;
setTimeout(() => {
   debugger;
   console.log('world');
}, 1000);
console.log('hello');

以下は、Nodeで使用できるステッピングコマンドのセットです。

Sr.No	Stepping Commands & Description
1	cont,c 持続する
2	next,n Next
3	step,s 介入する
4	out,o 踏みでる
5	pause コードを一時停止します。開発者ツールの一時停止に似ています

Nodeのデバッグコマンドの完全なリストは、https://nodejs.org/api/debuggerl [[[1]]]にあります。

Visual Studioコードとデバッグ

Visual Studio Codeの主要な機能の1つは、Node.jsランタイムの優れた組み込みデバッグサポートです。他の言語でコードをデバッグするために、デバッガー拡張機能を提供します。

App Ts

デバッガーは、構成ファイルの起動、ブレークポイント、変数の適用/削除/無効化および有効化、データ検査の有効化などを可能にする多数の機能を提供します。

VS Codeを使用したデバッグに関する詳細なガイドは、ここで見つけることができます-https://code.visualstudio.com/docs/editor/debugging

Es6-debugging

目次