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

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

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

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

啟用異步堆棧跟蹤：

• 打開Chrome Devtools。
• 轉到設置（齒輪圖標）→首選項→來源。
• 檢查“異步堆棧跟蹤” 。

啟用後，Chrome將保留在setTimeout ， Promise.then和await的異步操作中的呼叫堆棧。您會看到更完整的圖片，說明您的代碼如何到達斷點。

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

2。在承諾和異步功能中設置斷點

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

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

尖端：

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

3。使用“暫停異?！惫δ?/strong>

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

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