JavaScript デバッグをマスターする: 初心者のための最高のテクニック

JavaScript でのデバッグには、実行時の動作の分析、プログラム フローのトレース、ブラウザ コンソール、デバッガー、ロギング手法などのツールの使用によるエラーの特定と修正が含まれます。以下は、JavaScript でデバッグするためのさまざまな方法です。
1.デバッガーキーワードの使用
debugger キーワードは、JavaScript エンジンに特定の時点で実行を強制的に停止させます。検出されると、コードの実行が一時停止され、ブラウザのデバッグ ツールが開きます。
構文:
デバッガ;
例:

function sum(a, b) { 
   debugger; // Execution stops here 
   return a + b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

これにより、ブラウザの開発者ツールを使用して、その時点での変数とプログラムの状態を検査できるようになります。
2. console.log()
の使用 console.log() はデータをブラウザのコンソールに出力し、実行時の値とプログラム フローの追跡に役立ちます。
構文:

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: " + name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

コード全体に console.log() ステートメントを配置することで、変数が期待値を保持しているかどうかを検証できます。
3.ブレークポイントの使用
ブレークポイントはブラウザの開発者ツールで直接設定できます。特定の行でコードの実行を停止し、その時点のプログラムの状態を検査できるようにします。
ブレークポイントを設定する手順:

1. 開発者ツールを開きます (F12 を押すか、右クリックして「検査」を選択します)。
2. 「ソース」タブに移動します。
3. JavaScript ファイルを選択し、行番号をクリックしてブレークポイントを設定します。
4. コードの実行はその行で一時停止し、すべての変数と状態を検査できます。 例:

function multiply(a, b) { 
   return a * b; 
} 

let result = multiply(2, 5);
// ここにブレークポイントを設定し、値を検査します
この例では、multiply() 関数にブレークポイントを設定した後、開発者ツールで a と b の値を検査できます。
4. console.warn() と console.error() の使用
これらのメソッドは console.log() と同様に機能しますが、出力はコンソール内で視覚的に区別できるため、警告やエラーを区別するのに役立ちます。
構文:

console.warn(message); 
console.error(message);

例:

let age = 17; 

if (age < 18) { 
   console.warn("Warning: User is underage."); 
} else { 
   console.log("User is an adult."); 
} 

if (age < 0) { 
   console.error("Error: Age cannot be negative."); 
}

この場合、console.warn() は黄色の警告メッセージを表示し、console.error() は赤色でエラーを表示します。
5. try…catch ステートメントの使用
try…catch はランタイム エラーを適切に処理するために使用され、エラーをログに記録してアプリケーションのクラッシュを防ぐことができます。
構文:

try { 
   // Code that may throw an error 
} catch (error) { 
   console.error(error.message); 
} 

例:

function sum(a, b) { 
   debugger; // Execution stops here 
   return a + b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

try…catch ブロックは、アプリケーションをクラッシュさせることなく、JSON 解析エラーをキャッチし、コンソールに記録します。
6.パフォーマンス監視ツールの使用
パフォーマンスのデバッグの場合、開発者ツールの [パフォーマンス] タブは、関数の実行時間、メモリ使用量、パフォーマンスのボトルネックを監視するのに役立ちます。
手順:

1. 開発者ツールを開きます (F12 キーを押します)。
2. 「パフォーマンス」タブに移動します。
3. 「記録」をクリックしてコード実行の監視を開始します。
4. アプリケーションでアクションを実行してデータを収集します。
5. パフォーマンスのタイムラインを分析するには、記録を停止します。 例:

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: " + name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

この例では、console.time() と console.timeEnd() を使用して、コード ブロックの実行にかかる時間を測定します。
これらの方法と、パフォーマンス監視などのより高度なテクニックを適用することで、JavaScript コードの問題を効果的にデバッグし、解決できます。

JavaScript を学習している場合は、Medium でのステップバイステップのチュートリアルに従ってください: https://medium.com/@CodingAdventure

以上がJavaScript デバッグをマスターする: 初心者のための最高のテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。