DevTools設(shè)定でAsync Stackトレースを有効にして、Promise.senのような非同期操作全體にコールスタックを保持し、待ち望んでいて、完全な実行チェーンを見ることができます。 2.非典型的な関數(shù)でブレークポイントを直接設(shè)定します。then（）/。catch（）コールバック、および式を待って変數(shù)を検査し、解決された約束値を表示します。 3.「例外を一時(shí)停止する」を使用し、「キャッチされた例外で「一時(shí)停止」して、黙って失敗する可能性のある非同期コードの未処理の約束の拒否とエラーをキャッチします。 4。アナックコールバックにconsole.trace（）を挿入して、一時(shí)停止せずにasyncコールスタックとトレース実行フローをログに記録します。 5.タイミング測(cè)定にConsole.time（）を使用して、タイミングと実行順序をより適切に解釈するために、タスク（例えば、SettimeOut）とマイクロタスク（Promise.then）のイベントループの區(qū)別を理解します。さらに、イベントリスナーのブレークポイントを使用して、非同期コードをトリガーするDOMまたはネットワークイベントを一時(shí)停止し、非同期操作の起源を追跡するのに役立ちます。 Asyncスタックを有効にし、例外で一時(shí)停止し、Console.trace（）を使用すると、JavaScriptのほとんどの実際の非同期デバッグシナリオを効果的にカバーします。

JavaScriptで非同期コードをデバッグするのは難しい場(chǎng)合があります。コールバック、約束、非同期/待ち聲、およびイベントループにより、実行フローを追跡するのが難しくなります。 Chrome Devtoolsは、非同期コードを効果的にデバッグするのに役立つ強(qiáng)力な機(jī)能を提供します。それらを使用する方法は次のとおりです。

1.コールスタックとAsyncスタックトレースを使用します

Async機(jī)能をデバッグする場(chǎng)合、通常のコールスタックは、イベントループ境界でしばしば壊れている現(xiàn)在の同期コンテキストのみを表示します（例： Promise.then() ）。これにより、非同期操作がどこから発生したかを知ることが難しくなります。

asyncスタックトレースを有効にします：

• Chrome Devtoolsを開きます。
• 設(shè)定（ギアアイコン）→設(shè)定→ソースに移動(dòng)します。
• 「Async Stack Traces」を確認(rèn)してください。

有効になると、ChromeはsetTimeout 、 Promise.then 、 awaitなど、非同期操作全體にコールスタックを保存します。コードがどのようにブレークポイントに到達(dá)したかについて、より完全な寫真が表示されます。

例：
fetchData() → fetch() → .then(handleResult) → handleResult()がある場(chǎng)合、asyncスタックを有効にして、 handleResultをクリックすると.then()コールバックだけでなく、完全なチェーンが表示されます。

2.約束と非同期関數(shù)のブレークポイントを設(shè)定します

同期コードのように非同期コードをデバッグすることができます。

• async関數(shù)體
• .then()および.catch()コールバック
• 內(nèi)部のコードは式await

ヒント：

• [ソース]タブの行番號(hào)をクリックして、 [コード]ブレークポイントを使用します。
• 実行がasync関數(shù)內(nèi)のブレークポイントにヒットすると、 awaitキーワードは、約束が完了すると解決された値が表示されます。
• 変數(shù)の上にホバリングして、現(xiàn)在の狀態(tài)を検査します。これは、そのステータス（ pending 、 fulfilled 、 rejected ）と価値を示すことを約束します。

3. 「例外の一時(shí)停止」機(jī)能を使用します

非操作の拒否または非同期コールバックのエラーは、すぐに停止するとは限らないため、キャッチするのが難しい場(chǎng)合があります。

スマート例外の一時(shí)停止を有効にする：

• [DevToolsソース]タブで、 [例外の一時(shí)停止]ボタン（？）をクリックします。
• 必要に応じて、 「キャッチされた例外を一時(shí)停止する」を確認(rèn)してください。
• Chromeは、未処理の約束の拒絶（ --unhandled-rejections=strict FlagまたはModernバージョン）で一時(shí)停止します。

これにより、 .then()コールバックでエラーをキャッチしたり、黙って失敗する可能性のある表現(xiàn)await 。

4. console.trace（）を使用して、迅速なデバッグを使用します

ブレークポイントを使用していない場(chǎng)合は、Asyncコールバックにconsole.trace()をスプリンクルして、現(xiàn)在のAsyncコールスタックをコンソールにログに記録します。

 async関數(shù)step1（）{
  ステップ2（）;
}

async関數(shù)step2（）{
  await promise.resolve（）;
  console.trace（ "ここからどこから來たの？"）;
}

これにより、マイクロタスク全體でさえ、非同期パスを示すトレースが出力されます。

5.イベントループでタスクとマイクロタスクを理解します

Chrome devtoolsは、タスク（たとえば、 setTimeout ）とマイクロタスク（例えば、 Promise.then ）を視覚的に區(qū)別しませんが、これを理解することは実行順序を解釈するのに役立ちます。

• タスク：UIイベント、 setTimeout 、 setInterval
• マイクロタスク： Promise.then 、 queueMicrotask 、 MutationObserver

マイクロタスクは次のタスクの前に実行されます。これにより、デバッグタイミングに予期しない遅延や混亂が生じる可能性があります。

ヒント： performance.now()またはconsole.time()を使用して、レース條件をデバッグするときに実際のタイミングを測(cè)定します。

ボーナス：イベントリスナーブレークポイントを使用します

AsyncコードがDOMイベントまたはネットワーク応答によってトリガーされる場(chǎng)合があります。

[ソース]タブで：

• イベントリスナーのブレークポイントを展開します（右側(cè)）。
• click 、 fetch 、 timeoutなどのイベントのブレークポイントを有効にします。

これにより、非同期操作がスケジュールされたときに一時(shí)停止し、ユーザーアクションやAPI呼び出しに戻るのに役立ちます。

Chrome Devtoolsでのアナイクコードのデバッグは、痛みを伴う必要はありません。 ASYNCスタックトレースが有効になっていること、スマートブレークポイント、適切な例外処理により、同期のようにフローをたどることができます。重要なのは、どこを見るべきかを知り、適切な設(shè)定をオンにすることです。

基本的に、非同期スタックを有効にし、例外で一時(shí)停止し、必要に応じてconsole.trace()を使用します。これは、ほとんどの実際のデバッグシナリオをカバーしています。

以上がChrome Devtoolsでの非同期コードのデバッグの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。