DevTools (Microsoft Edge 113) 的新功能

這些是 Microsoft Edge 穩定版本中的最新開發工具功能。

影片：DevTools 113 和 114 的新功能

使用 Crash Analyzer 工具偵錯 JavaScript 錯誤堆疊追蹤

新的 當機分析器 工具可在 Microsoft Edge 113 中做為實驗使用。 在 損毀分析器 工具中，您可以輸入 JavaScript 堆疊追蹤，例如針對非嚴重 JavaScript 例外狀況，然後將來源對應套用至堆疊追蹤，以便更快速地偵錯。

若要存取損毀分析器工具，請在 [設定>實驗] 中選取 [啟用損毀分析器] 實驗。 請參閱 開啟或關閉實驗。

您可以向 Azure 應用程式深入解析等工具報告非嚴重 JavaScript 例外狀況或類似資料：

1. 首先，為了使用 Crash 分析器 工具，您需要特殊格式的堆疊追蹤，其中包含名為 Source modules的區段。 本節包含屬於錯誤堆疊追蹤之 JavaScript 函數的來源對應參考。 您可以使用 Crash Analyzer Support npm 套件來產生這些堆疊追蹤。

2. 然後，您需要一種方法來從運行您代碼的瀏覽器實際接收堆棧跟踪。 其中一個方法是使用 Azure 應用程式深入解析;請參閱 Application Insights 概觀。

3. 一旦有了堆疊追蹤，請將其貼到 [當機分析器 ] 工具的左窗格中。

4. 在 [當機分析器 ] 工具中，按一下 [ 分析 ] 按鈕 (或按 Ctrl+Enter) 。 右側窗格顯示組成堆疊追蹤的原始檔案和函數名稱：

   

5. 按一下個別堆疊框架，查看原始程式碼中造成錯誤的行。

如需詳細資訊，請參閱 當機分析工具。

另請參閱:

• throw - JavaScript |MDN 網頁文件
• Application Insights 概觀
• Crash Analyzer 支援 |npm

[記憶體] 工具可以取消縮小堆積快照集中的物件名稱

在 Microsoft Edge 113 中， 只要 載入來源對應，記憶體工具現在會在建立堆積快照時自動提供原始物件名稱。 來源對應裝載在 Azure 成品符號伺服器上，即可可靠且安全地載入來源對應。

在下圖中，縮小的物件名稱 e 顯示在 記憶體 工具的堆積快照中：

現在在 Microsoft Edge 113 中， 記憶體 工具會自動取消縮小堆積快照集中的物件名稱：

另請參閱:

• 藉由將原始檔對應發佈到 Azure Artifacts 符號伺服器，安全地偵錯原始程式碼
• 使用 Azure Artifacts 符號伺服器來源對應安全地偵錯原始程式碼
• 在 [使用記憶體工具錄製堆積快照集] 中擷取快照集 (「堆積快照集」分析類型) 。

[問題] 工具更適用於鍵盤瀏覽

在 [問題] 工具中，變更 [嚴重性 ] 或 [瀏覽器 ] 篩選會在 [ 問題 ] 工具頂端顯示資訊列，其中包含 [ 重新產生問題 ] 按鈕。 在舊版的 Microsoft Edge 中，使用鍵盤瀏覽此資訊列會導致 [關閉 ] 按鈕消失。 在 Microsoft Edge 113 中，這個問題已經修正：

另請參閱:

• 使用 [問題] 工具在尋找和修正問題中篩選問題
• 使用輔助技術瀏覽 DevTools

在 [焦點模式] 中，將游標暫留在工具上不會再使每個工具的名稱在 [活動列] 中消失

在舊版的 Microsoft Edge 中，在焦點模式中，在水平模式下將游標停留在 活動列 中的工具圖示上會導致 活動列 中的其他工具名稱消失。 在 Microsoft Edge 113 中，這個問題已經修正。 當您將游標暫留在工具圖示上以在工具提示中查看工具名稱時，其他工具的名稱仍會顯示在 [活動列] 中：

[自訂開發工具] 功能表更佳地支援 VS Code 主題

更新：從 Microsoft Edge 131 開始，Visual Studio Code 佈景主題功能遭到移除，而這類佈景主題會還原為預設佈景主題：

• 輕量+
• Dark+

在舊版的 Microsoft Edge 中，套用來自 Microsoft Visual Studio Code 的主題，例如 Solarized Light 或 Kimbie Dark，當游標停留在 [自訂和控制開發工具] 功能表中的項目上時，會造成低對比問題。 在 Microsoft Edge 113 中，這個問題已經修正。 [自訂及控制 DevTools] 功能表中的項目現在會以足夠的色彩對比顯示：

另請參閱:

• 使用 [色彩選擇器] 測試文字與色彩對比
• 使用 [檢查] 工具檢查預設狀態下的文字色彩對比

[記憶體] 工具中的 [節點類型] 篩選現在只會顯示在堆積快照的 [摘要] 檢視中

在 Microsoft Edge 100 中，我們新增了節點 類型 篩選器到 記憶體 工具，讓您在查看堆積快照時只能專注於特定類型的物件，例如 Array 或 String。 此 節點類型 篩選僅適用於堆積快照的 [摘要 ] 檢視中顯示的物件。

選取堆積快照的 [包含] 或 [統計資料] 檢視時，也會顯示 [節點類型] 篩選，即使篩選不適用於這些檢視。 我們已修正此問題。 在 Microsoft Edge 113 中，只有在選取 [摘要] 檢視時，才會顯示 [節點類型] 篩選：

在 [包含] 和 [統計資料 ] 檢視中，不再顯示 [節點類型 ] 篩選，因為它不適用：

另請參閱:

• 依節點類型篩選堆積快照集摘要 [開發工具] 中的新功能 (Microsoft Edge 100)
• 在 [使用記憶體工具錄製堆積快照集] 中擷取快照集 (「堆積快照集」分析類型) 。

來自 Chromium 專案的公告

Microsoft Edge 113 也包含下列來自 Chromium 專案的更新：

• 覆寫網路回應標頭
• Nuxt、Vite 和 Rollup 偵錯改善
• 元素 > 樣式中的 CSS 改進
  • CSS 屬性和值無效
  • 動畫速記屬性中關鍵畫面格的連結
• 新的主機設定：Enter 時自動完成
• 命令功能表強調撰寫的檔案
• JavaScript 分析工具淘汰：第二階段

另請參閱

• Microsoft Edge DevTools 的新增功能
• Microsoft Edge Web 平台的版本資訊