DevTools (Microsoft Edge 93) 的新功能

若要查看 Microsoft Edge DevTools 的最新功能，以及適用於 Microsoft Visual Studio Code 和 Visual Studio 的 Microsoft Edge DevTools 擴充功能，請閱讀這些公告。

若要保持最新狀態並取得最新的 DevTools 功能，請下載測試人員預覽版的 Microsoft Edge。 無論您是使用 Windows、Linux 或 macOS，請考慮使用 Canary (或其他預覽通道) 作為預設開發瀏覽器。 Beta、Dev 和 Canary 版本的 Microsoft Edge 會以個別應用程式的形式執行，並存於穩定發行的 Microsoft Edge 版本。 請 參閱Microsoft Edge 測試人員通道。

如需最新的公告，請遵循 Twitter 上的 Microsoft Edge 小組。 若要回報 DevTools 的問題或要求新功能，請在 MicrosoftEdge/DevTools 存放庫中提出問題。

影片：Microsoft Edge |DevTools 93 的新功能

將主題從Visual Studio Code 套用至DevTools

除了現有的淺色和深色主題之外，Microsoft Edge DevTools 現在還支援 Visual Studio Code 中一些最熱門的色彩主題。 若要選取色彩主題，請按兩下 [DevTools 設定 ] ([ ) 按鈕，然後從 [ 主題 ] 下拉式清單中選取主題。

支援的 Visual Studio Code 主題如下：

淺色主題：

• 太陽能光源
• 靜色燈

深色主題：

• 深淵
• Kimbie Dark
• Monokai
• Monokai Dimmed
• 太陽能化深色
• 紅色
• 明天晚上藍色

請參閱 將色彩主題套用至 DevTools。

使用新的Detached Elements工具偵錯 DOM節點記憶體流失

DOM 節點不再附加至 DOM 的任何元素，但仍由 Microsoft Edge 保留在記憶體中時，會被視為「中斷連結」。 瀏覽器無法垃圾收集元素，因為有些 JavaScript 仍在參考元素，即使該專案已不在頁面上或是 DOM 的一部分也一樣。

新的 [中斷連結的元素 ] 工具會在您的頁面上尋找所有中斷連結的元素並加以顯示。 您可以展開和折疊中斷連結的專案，以查看同時保留的父節點和子節點。 您可以選取 [ 收集垃圾 ] 來觸發瀏覽器的垃圾收集，並驗證當卸離的專案無法進行垃圾收集時，您是否有記憶體流失。 最後，您可以使用 [ 分析 ] 按鈕來擷取堆積快照集，以跳到參考已中斷鏈接專案的 JavaScript。

更新：此功能已發行，且已不再是實驗性功能。

另請參閱:

• 使用 Detached Elements 工具偵錯 DOM 記憶體流失

Visual Studio Code 調試程式現在會與 DevTools 擴充功能整合

如果您在 Visual Studio Code 中使用 JavaScript 偵錯，您現在可以選取 [檢查] 按鈕來啟動 Microsoft Edge Developer Tools for Visual Studio Code 擴充功能。

這項功能會將 DOM 和 CSS 偵錯與 Visual Studio Code 中的 JavaScript 偵錯整合。 如果您未安裝 DevTools 擴充功能，當您選取 [ 檢查 ] 按鈕時，Visual Studio Code 會提示您安裝擴充功能。

其他新功能包括：

• 當您在不同的偵錯目標之間切換時，工具會自動重新整理。
• 數個 Bug 修正。
• 延伸模組的更詳細檔。

如需改善和修正的詳細資訊，請檢查存放庫中的 vscode-edge-devtoolschangelog 檔案。

另請參閱:

• 與 Visual Studio Code 偵錯整合。

取得 Microsoft Edge Developer Tools for Visual Studio Code 延伸模組。 Microsoft Visual Studio Code 會自動更新擴充功能;若要改為手動更新此擴充功能，請參閱 手動更新擴充功能。

您可以在 vscode-edge-devtools GitHub 存放庫上提出問題並參與擴充功能。

DevTools 的新 Fluent UI 圖示

Microsoft Edge DevTools 採用 Fluent UI，讓按鈕和功能表具有更新式的外觀，更符合Microsoft Edge 瀏覽器的其餘部分。

直接從 [設定] 變更 DevTools 顯示語言

先前，若要變更 DevTools 中的顯示語言，您必須變更瀏覽器語言。 現在，您可以輕鬆地在 DevTools 設定中切換顯示語言，而不需要變更瀏覽器設定。 若要這樣做，請開啟 [設定]，然後在 [ 喜好設定] 中，從 [語言] 下拉式清單中選取 語言 。

根據預設，DevTools 會比對瀏覽器的顯示語言。 請參閱 變更 DevTools 語言設定。

如需 Chromium 開放原始碼專案中這項功能的歷程記錄，請參閱問題 2882756。

在 CSS-in-JS 連結庫的 [樣式] 窗格中複製宣告

先前，使用 CSS-in-JS 連結庫時，您無法將 CSS 宣告複製 (CSS 屬性和值) 為 JavaScript 格式化。 您必須編輯複製的 CSS，以符合 JavaScript 的語法。

現在在 Microsoft Edge 版本 93 中，您可以複製單一 CSS 宣告或樣式規則中的所有宣告，並直接貼到 JavaScript 檔案中，而不會發生語法問題。 若要嘗試此功能：

1. 在 [專案] 工具的 [樣式] 窗格中，以滑鼠右鍵按兩下樣式規則中的宣告。

2. 選 取 [複製宣告] 作為 [JS] 或 [將所有宣告複製為 JS]。

3. 將複製的 CSS 貼到文本編輯器中的 JavaScript 檔案，例如 Visual Studio Code。 例如：'--more-link': 'lime'。

若要深入瞭解如何檢視和變更 CSS，請參閱 CSS 功能參考。

更輕鬆地自定義 User-Agent 用戶端提示

User-Agent 用戶端提示可讓瀏覽器資訊比以分號分隔的 User-Agent 字串更容易存取，並改善網站相容性。 一開始，User-Agent 用戶端提示在測試和偵錯時非常耗時。 對用戶端提示的控制較少，而且必須正確填入用戶端提示，表單才能運作。

在此版本中，我們重新設計了偵錯體驗，讓您可以透過具有多個不同欄位和控件的 UI，輕鬆地修改 User-Agent 用戶端提示。 此外，您現在可以同時測試自定義 User-Agent 用戶端提示和 User-Agent 字串。 您現在可以在 [設定] 或 [網络條件] 工具中，為自定義裝置定義 User-Agent 用戶端提示。

如需在 [ 設定] 中定義提示的詳細資訊，請參閱 設定使用者代理程式用戶端提示。

您也可以使用 [網络條件 ] 工具覆寫目前頁面 User-Agent 用戶端提示。

如需在 網路條件 工具中定義提示的詳細資訊，請參閱 設定使用者代理程式用戶端提示。

如需 Chromium 開放原始碼專案中這項功能的歷程記錄，請參閱問題 1174299。

螢幕助讀程式現在會在工具列和控制台中宣告錯誤、警告和問題

先前，螢幕助讀程式的使用者只會聽到 DevTools 工具列中所宣告的錯誤、警告或問題數目。 未包含所宣告通知類型的其他資訊，例如「錯誤」、「警告」或「問題」。 例如，如果 DevTools 回報 3 個錯誤，螢幕助讀程式只會宣告 “3”。

現在在 Microsoft Edge 版本 93 中，螢幕助讀程式會正確宣告通知的類型和數目;錯誤、警告或問題。 例如，如果 DevTools 報告 3 個錯誤和 5 個警告，螢幕助讀程式現在會宣佈「3 個錯誤，5 個警告」。 此修正已套用至 DevTools 工具列和控制台中的通知。

如需偵錯控制台錯誤的相關信息，請參閱 修正控制台中回報的 JavaScript 錯誤。 如需 DevTools 所發現之問題的相關信息，以及您可以對網頁進行的改善，請參閱 使用問題工具尋找並修正問題。

如需 Chromium 開放原始碼專案中這項功能的歷程記錄，請參閱問題 1223208。

在網路工具中複製為 PowerShell 現在包含 Cookie

之前，在網路工具中，在網路活動記錄中為指定的網路要求產生 PowerShell 命令時，[複製>為PowerShell] 操作功能表選項不包含 Cookie。 這表示，如果需要 Cookie，產生的 PowerShell 命令就無法成功提出相同的網路要求。

現在在 Microsoft Edge 版本 93 中， [複製為 PowerShell] 操作 選單選項會正確設定 DevTools 觀察到的 User-Agent 字串和 Cookie。 產生的 PowerShell 命令現在可以成功提出 DevTools 觀察到的相同網路要求，甚至對相依於 Cookie 的伺服器也一樣。

如需網路活動記錄的詳細資訊，請參閱 網路功能參考。

如需此功能的歷程記錄，請參閱問題 932971。

此工作是根據 Creative Commons Attribution 4.0 International License 授權。