クイックチェックにはconsole.log（）を使用します。できればラベルまたはオブジェクトのconsole.table（）を使用します。 2.ブラウザDevToolsを使用してブレークポイントを設(shè)定し、コードをステップスルーし、変數(shù)を検査します。 3.実裝してください...同期および非同期/待機(jī)のエラーをキャッチし、[コンソール]タブを監(jiān)視します。 4. ESLINTとよりきれいを適用して、エラーをキャッチし、コードの一貫性を維持します。 5。デバッガーを挿入します。必要に応じて実行を一時停止するステートメント。 6.ネットワークリクエストとDOMの問題を調(diào)査し、ネットワークと要素を使用してタブを使用します。これらのメソッドを組み合わせることで、効果的なJavaScriptデバッグが保証されます。

JavaScriptコードのデバッグは、すべての開発者が毎日使用するスキルです。 JavaScriptで問題を効果的に見つけて修正する方法は次のとおりです。

1。クイックチェックにはconsole.log()を使用します

デバッグする最も単純で最も一般的な方法はconsole.log()を使用することです。コードのキーポイントに挿入して、変數(shù)値、実行フロー、または関數(shù)が呼び出されているかどうかを確認(rèn)します。

 console.log（ "ユーザーデータ："、userdata）;
console.log（ "Active？"、isactive）;

それは高速で、Browser、node.jsなどのほぼすべての場所で動作します。ただし、制作コードにconsole.log()ステートメントを殘さないでください。

プロのヒント：ラベル付きログを使用して、混亂を避けます。

 console.log（ "ステップ3："、step3value）;

配列またはオブジェクトにconsole.table()を使用します。テーブルでデータをうまくフォーマットします。

2.ブラウザ開発者ツールを使用します

モダンなブラウザ（Chrome、Firefox、Edge）には、強(qiáng)力な組み込みDevToolsがあります。それらを効果的に使用する方法は次のとおりです。

• F12またはCtrl Shift Iを備えたDevToolsを開きます（MacのCmd Option I ）。
• ソース（またはデバッガー）タブに移動します。
• ライン番號をクリックして、JavaScriptファイルを見つけ、ブレークポイントを設(shè)定します。
• コードが実行されると、ブレークポイントで一時停止します。
• コントロールを使用してコードをステップスルーします。
  • ステップオーバー
  • 足を踏み入れます
  • 実行を続けます
• 変數(shù)とコールスタックをリアルタイムで検査します。

あなたもできます：

• 條件付きブレークポイントを追加します（條件が満たされたときにのみトリガー）。
• debugger;コードで一時停止を強(qiáng)制する：

   if（error）{
    デバッガ; // devtoolsが開いている場合、実行はここで停止します
  }

3.エラーを優(yōu)雅に処理します

try...catch 、ランタイムエラーをキャッチします。

試す {
  riskyoperation（）;
} catch（error）{
  console.error（ "何かがうまくいかなかった："、error.message）;
}

非同期コード（約束）については、 .catch()を使用するか、 async/awaitでtry...catch 。

 async関數(shù)fetchdata（）{
  試す {
    const res = await fetch（ '/api/data'）;
    const data = await res.json（）;
  } catch（error）{
    Console.Error（ "FETCH FALED："、error）;
  }
}

また、DevToolsのコンソールタブを確認(rèn)します。JavaScriptエラーと警告がリアルタイムで表示されます。

4.コードを糸くずとフォーマットします

Eslintなどのツールを使用して、一般的な間違いを早期にキャッチします（例えば、未定義の変數(shù)、構(gòu)文の問題）：

 npx eslint your-file.js

そして、きれいに使用して、コードのフォーマットを一貫性に保ちます。時々、構(gòu)造化されていないコードでバグが隠されます。

5。 debugger;戦略的に

debugger;実行したい場所（DevToolsが開いている場合）：

 function processuser（user）{
  デバッガ;
  return user.name.touppercase（）;
}

すぐに切り替えることができるブレークポイントのようなものです。

6.ネットワークとDOMの問題を確認(rèn)します

バグがJavaScriptロジックにない場合がありますが、

• API呼び出しに失敗しました（ネットワークタブをチェックします）。
• 要素が見つかりません（ document.getElementById nullを返します）。
• イベントリスナーは適切に添付されていません。

[要素]タブを使用して、DOMが期待に一致するかどうかを點検します。

基本的に、デバッグは、あなたのコードが実際に何をするかを観察することと、それが期待することです。 console.log 、devtools、および構(gòu)造化されたエラー処理を組み合わせて、ほとんどのバグをすばやくキャッチします。

以上がJavaScriptコードをどのようにデバッグしますか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。