在DevTools設(shè)置中啟用異步堆棧跟蹤，以在Promise.lose.then和等待的異步操作中保留呼叫堆棧，從而使您可以看到完整的執(zhí)行鏈。 2。在異步函數(shù)中直接設(shè)置斷點(diǎn)，然后。 3.使用“暫停異?！?，并啟用“抓取異?！钡摹皶和！?，以捕獲無(wú)與倫比的拒絕和異步代碼中的錯(cuò)誤，否則可能會(huì)默默失敗。 4。在異步回調(diào)中插入console.trace（）記錄異步調(diào)用堆棧和跟蹤執(zhí)行流，而無(wú)需暫停。 5。了解事件循環(huán)在任務(wù)（例如SettieMout）和Microtasks（例如，Promise...then）之間的區(qū)別，以便使用Console.Time（）進(jìn)行定時(shí)測(cè)量，以更好地解釋定時(shí)和執(zhí)行順序。此外，使用事件偵聽器斷點(diǎn)暫停觸發(fā)異步代碼的DOM或網(wǎng)絡(luò)事件，有助于跟蹤異步操作的起源。啟用異步堆棧，暫停例外和使用console.trace（）有效地涵蓋了JavaScript中大多數(shù)真實(shí)的異步調(diào)試場(chǎng)景。

在JavaScript中調(diào)試異步代碼可能很棘手 - 回?fù)簦兄Z，異步/等待和事件循環(huán)使得很難跟蹤執(zhí)行流程。 Chrome DevTools提供了強(qiáng)大的功能，可幫助您有效調(diào)試異步代碼。這是使用它們的方法。

1。使用呼叫堆棧和異步堆棧跟蹤

當(dāng)調(diào)試異步功能時(shí)，常規(guī)調(diào)用堆棧僅顯示當(dāng)前同步上下文，該上下文通常會(huì)在事件環(huán)邊界上斷裂（例如，在Promise.then()之后）。這使得很難知道異步操作的起源在哪里。

啟用異步堆棧跟蹤：

• 打開Chrome Devtools。
• 轉(zhuǎn)到設(shè)置（齒輪圖標(biāo)）→首選項(xiàng)→來(lái)源。
• 檢查“異步堆棧跟蹤” 。

啟用后，Chrome將保留在setTimeout ， Promise.then和await的異步操作中的呼叫堆棧。您會(huì)看到更完整的圖片，說(shuō)明您的代碼如何到達(dá)斷點(diǎn)。

例子：
如果您的fetchData() → fetch() → .then(handleResult) → handleResult() ，則啟用了異步堆棧，請(qǐng)單擊handleResult將顯示完整的鏈，而不僅僅是.then()呼叫。

2。在承諾和異步功能中設(shè)置斷點(diǎn)

您可以像同步代碼一樣調(diào)試異步代碼 - 直接設(shè)置斷點(diǎn)：

• async功能體
• .then()和.catch()回調(diào)
• 內(nèi)部代碼await表達(dá)式

尖端：

• 通過單擊“源”選項(xiàng)卡中的“行號(hào)”來(lái)使用“線路”斷點(diǎn)。
• 當(dāng)執(zhí)行在async函數(shù)中登錄斷點(diǎn)時(shí)， await關(guān)鍵字將在承諾完成后顯示解決值。
• 懸停在變量上檢查其當(dāng)前狀態(tài)，甚至承諾顯示其狀態(tài)（ pending ， fulfilled ， rejected ）和價(jià)值。

3。使用“暫停異常”功能

無(wú)人駕駛的承諾拒絕或異步回調(diào)中的錯(cuò)誤可能很難捕獲，因?yàn)樗鼈儾⒉豢偸怯|發(fā)立即停止。

啟用智能例外暫停：

• 在“ DevTools”源選項(xiàng)卡中，單擊異常按鈕上的暫停（？）。
• 如果需要，請(qǐng)檢查“暫停例外” 。
• Chrome現(xiàn)在將停止在未經(jīng)方便的承諾拒絕中（使用--unhandled-rejections=strict標(biāo)志或現(xiàn)代版本）。

這有助于您在.then()回調(diào)或await可能會(huì)默默失敗的表達(dá)式中捕獲錯(cuò)誤。

4。使用Console.Trace（）快速調(diào)試

如果您不使用斷點(diǎn)，請(qǐng)?jiān)诋惒交卣{(diào)中sherpinkle console.trace()將當(dāng)前的異步調(diào)用堆棧記錄到控制臺(tái)。

異步函數(shù)step1（）{
  step2（）;
}

異步函數(shù)step2（）{
  等待Promise.resolve（）;
  console.trace（“我們從哪里到這里？”）；
}

這將輸出一個(gè)跡線，顯示異步路徑（即使跨微型掩體）在您不能或不想暫停執(zhí)行時(shí)會(huì)助長(zhǎng)。

5。在事件循環(huán)中了解任務(wù)與Microtask

Chrome DevTools在視覺上沒有區(qū)分任務(wù)（例如setTimeout ）和Microtasks（例如， Promise.then ），但是了解這有助于解釋執(zhí)行順序。

• 任務(wù)：UI事件， setTimeout ， setInterval
• Microtasks MutationObserver Promise.then queueMicrotask

MicroTasks在下一個(gè)任務(wù)之前運(yùn)行，這可能會(huì)導(dǎo)致意外的延遲或混淆在調(diào)試計(jì)時(shí)。

提示：使用performance.now()或console.time()在調(diào)試比賽條件時(shí)測(cè)量實(shí)際時(shí)間。

獎(jiǎng)勵(lì)：使用活動(dòng)聽眾斷點(diǎn)

有時(shí)，異步代碼是由DOM事件或網(wǎng)絡(luò)響應(yīng)觸發(fā)的。

在“來(lái)源”選項(xiàng)卡中：

• 擴(kuò)展事件偵聽器斷點(diǎn)（右圖）。
• 為click ， fetch或timeout等事件啟用斷點(diǎn)。

這使您可以在安排異步操作時(shí)正確暫停，從而幫助追溯到用戶操作或API調(diào)用。

在Chrome DevTools中調(diào)試異步代碼并不一定要痛苦。通過啟用異步堆棧跟蹤，智能斷點(diǎn)和適當(dāng)?shù)漠惓Ｌ幚恚梢韵裢揭粯痈S流程。關(guān)鍵是知道在哪里看，并打開正確的設(shè)置。

基本上，啟用異步堆棧，暫停異常，并在需要時(shí)使用console.trace() 。涵蓋了大多數(shù)實(shí)際的調(diào)試場(chǎng)景。

以上是在Chrome DevTools中調(diào)試異步代碼的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！