這些是 Microsoft Edge DevTools 穩定版的最新功能。
改進 DevTools 的在地化
為了滿足您的翻譯需求，Microsoft Edge DevTools 團隊專注於提升翻譯品質。 從 Microsoft Edge 87 版本開始，許多字串和詞彙被鎖定且不會改變，即使其他 DevTools 以其他語言顯示。 受影響的字串與術語清單包括以下幾項：
- 燈 塔工具裡 的弦。
- 這個術語
service worker。 - 部分網路工具的篩選功能如
URL、XHRJSCSS。 - $ 0 控制台工具 API。
現在，對於在地化版本的開發工具使用者，主控台上已提供 $0 的服務。 感謝全球開發者社群協助提升 Microsoft Edge DevTools 的在地化。 持續 提供本地化品質回饋 ，以提升 DevTools 在各地區的支援。 關於Chromium開源專案中此功能的即時更新，請參見第 #1136655 期。
另請參閱:
在上下面板間移動工具
DevTools 現在支援在上下面板間移動工具。 透過同時瀏覽任意組合兩種工具，客製化你的開發工具並提升生產力。 例如， (透過將來源工具移到底部) ，同時查看元素與來源工具。
要將任何上方工具移到底部，請右鍵點擊分頁，然後選擇 「移動到底部」：
要將任何底部工具移到頂部，請右鍵點擊一個分頁，然後選擇 「移動到頂部：
關於Chromium開源專案中此功能的歷史，請參見第 #1075732 期。
另請參閱:
- 活動列工具與快速檢視工具的比較關於工具列表
使用網路控制台儲存並匯出
網路主控台工具現在與 Postman v2.1 及 OpenAPI v2 架構的相容性提升。
網路主控台工具現在支援以下操作：
- 儲存並匯出收藏與環境。
- 在 網路主控台 工具中編輯並匯出環境變數集合。
輸入新環境名稱：
選擇新環境格式：
更新：此功能已發布，不再是實驗性功能。
另請參閱:
- 在 Compose 中儲存並匯出集合、環境及環境變數，並使用 Network Console 工具發送網頁 API 請求。
關於歷史，請參見Chromium開源專案中的第 #1093687 期。
改良版 CSS 網格工具
Microsoft Edge DevTools 現在支援以下功能，用於檢查、檢視及除錯您的 CSS 網格。
使用 檢查 工具顯示簡化的格子覆蓋層，或使用持久覆蓋層獲得更詳細的資訊。
要啟用持久格子覆蓋層，請點擊元素工具中格子容器元素旁的網格圖示，或在版面工具中點擊該網格。
你可以為多個格子啟用持久覆蓋層。
新的 版面工具 讓你可以輕鬆切換格子覆蓋層，並設定每個格子的外觀與內容。
這些功能預設是開啟的。
更新：此功能已發布，不再是實驗性功能。
另請參閱:
關於歷史，請參見Chromium開源專案中的第 #1047356 期。
Microsoft Edge DevTools 團隊正與 Chrome DevTools 團隊及 Chromium 社群合作，為 DevTools 新增 flexbox 工具功能。 關於Chromium開源專案中 flexbox 工具的最新進展，請參見第 #1136394。
在設定中自訂鍵盤快捷鍵
你現在可以在 DevTools 裡自訂任何動作的快捷鍵。 從 Edge 84 版本Microsoft開始，你可以在 Visual Studio Code 和 DevTools 之間選擇， (預設的) 預設來設定鍵盤快捷鍵。 從 Microsoft Edge 87 版本開始，你可以進一步自訂鍵盤快捷鍵。
更新：此功能已發布，不再是實驗性功能。
另請參閱:
- 在自訂鍵盤捷徑中編輯 DevTools 動作的鍵盤快捷鍵。
關於歷史，請參見Chromium開源專案中的議題#174309。
介紹 Microsoft Edge 工具 for Visual Studio Code 擴充功能
Visual Studio Code 元素與 Visual Studio Code 網路擴充功能現已合併入新的 Microsoft Edge 開發者工具 for Visual Studio Code 擴充功能。 在不離開 Microsoft Visual Studio Code 的情況下，使用 Microsoft Edge DevTools 進行以下活動。
- 除錯 DOM
- 編輯 CSS
- 檢查網路流量
使用擴充功能時，可以啟動 Microsoft Edge、連接現有的瀏覽器實例，或直接從編輯器使用無頭瀏覽器。 想開始貢獻並提交對此擴充功能的回饋問題，請參閱 GitHub 上的 Microsoft Edge 開發者工具庫 for Visual Studio Code。
在完整瀏覽器模式下使用擴充功能：
在無頭模式下使用擴充功能：
欲了解更多資訊，請參閱 Microsoft Edge DevTools 擴充套件（針對 Visual Studio Code）。
Chromium 計畫的公告
以下章節將宣布 Microsoft Edge 中為開源 Chromium 專案所貢獻的額外功能。
新的 WebAuthn 工具
在早期版本的 Microsoft Edge 中，沒有原生的 WebAuthn 除錯支援。 你需要實體驗證器來測試你的網頁應用程式，搭配 Web Authentication API。 使用新的 WebAuthn 工具，您可以在不使用任何實體驗證器的情況下完成以下操作：
- 模擬驗證器。
- 自訂驗證器的屬性。
- 檢查驗證器的狀態。
你可以用新的 WebAuthn 工具模擬驗證器並除錯網路驗證 API。 要開啟 WebAuthn 工具，請點擊自訂 並控制開發工具 (...) 圖示 >更多工具>WebAuthn。 關於Chromium開源專案中此功能的即時更新，請參見第 #1034663 期。
開啟 WebAuthn 工具：
WebAuthn 工具：
欲了解更多資訊，請參閱模擬 驗證器及除錯 WebAuthn。
元素工具更新
另請參閱:
在樣式面板中查看計算側邊欄面板
切換 Styles 面板中的 Computed 窗格。
Styles 面板中的 Computed 窗格預設是摺疊的。 若要在樣式窗格中顯示或隱藏計算樣式，請點擊「顯示計算樣式」側邊欄 (「
) 按鈕。
打開 計算側邊欄 視窗：
計算側邊欄面板：
關於Chromium開源專案中此功能的即時更新，請參見 Issue #1073899。
另請參閱:
- 僅查看實際應用於CSS 特徵參考中的元素的 CSS
在計算面板中將 CSS 屬性分組
要減少捲動瀏覽已套用的 CSS，請將 CSS 屬性依類別分組於 Computed 窗格中。 你也可以選擇性地專注於一組相關的屬性，同時檢視你的 CSS。 從 元素 工具中選擇一個元素。 要 (或取消群組，) CSS 屬性，請切換 群組 勾選框。
欲了解Chromium開源專案中此功能的即時更新，請參閱議題 #1096230、#1084673 和 #1106251。
另請參閱:
- 僅查看實際應用於CSS 特徵參考中的元素的 CSS
Lighthouse 工具中的 Lighthouse 6.4
Lighthouse 工具目前運行 Lighthouse 6.4。 完整變更清單請參閱 Lighthouse 發布說明。 欲了解Chromium開源專案中此功能的即時更新，請參見第 #772558 期。
另請參閱:
在時間區塊中 () performance.mark 事件
Performance 工具中錄製的時間區現在會標記performance.mark()事件。 要嘗試這個功能並衡量 JavaScript 程式碼的效能，請在程式碼中加入 performance.mark() 事件。
以下程式碼在startend迴圈前後for添加效能標記：
performance.mark('start');
for (var i = 0; i < 1000; i+=7;){
console.log(i);
}
performance.mark('end');
接著，打開 效能 工具，查看 時序區塊 來記錄你的 JavaScript 程式碼。 你新增的 performance.mark() 事件現在會顯示在錄影中。
網路工具中的新資源類型與網址篩選器
在網路工具中使用新關鍵字resource-typeurl來篩選網路請求。 例如，使用 來 resource-type:image 聚焦於網路請求的影像：
欲發現更多特殊關鍵字如 resource-type 和 url，請參閱 屬性篩選請求。
欲了解Chromium開源專案中此功能的即時更新，請參見議題 #1121141 與 #1104188。
框架詳細檢視更新
在 應用程式 工具中，左側頁面列表的底 頁是框架，通常會列出名為 頂端的框架。
顯示 COEP 及 COOP 向端點回報
在 應用程式 工具中，左側頁面列表的底 頁是框架，通常會列出名為 頂端的框架。 選擇框架以查看框架細節檢視，其中包含 安全 & 隔離 區塊。
在框架細節頁面的安全 & 隔離 區，請參閱 COEP) (跨起源嵌入策略及 COOP) reporting to 端點 (跨起源開啟器政策。
Reporting API 定義Report-To了 ，這是一個新的 HTTP 標頭，讓你能指定瀏覽器發送警告和錯誤的伺服器端點。
關於Chromium開源專案中此功能的即時更新，請參見第 #1051466 期。
另請參閱:
- 在 DevTools (Microsoft Edge 88) 中顯示開啟視窗的視窗框細節
- 應用程式工具，用於管理儲存
顯示 COEP 及 COOP 僅報告模式
在 應用程式 工具中，左側頁面列表的底 頁是框架，通常會列出名為 頂端的框架。 選擇框架以查看框架細節檢視，其中包含 安全 & 隔離 區塊。
框架詳細頁面的安全 & 隔離 區現在顯示 report-only 已設定為 report-only 模式的 COEP 與 COOP 標籤。
關於Chromium開源專案中此功能的即時更新，請參見第 #1051466 期。
另請參閱:
- 在 DevTools (Microsoft Edge 88) 中顯示開啟視窗的視窗框細節
- 應用程式工具，用於管理儲存
在 CSS 總覽工具中檢視並修正色彩對比問題
CSS 總覽工具現在會顯示頁面上有色彩對比問題的元素清單。
例如， CSS 概覽《Accessible Colors Demo 》 (https://css-overview-accessible-colors-demo.glitch.me) (404) 頁面中就有一個色彩對比問題的範例。 (Glitch.me 專案主辦於2025年7月8日結束。這個測試網站可能會移到 https://github.com/MicrosoftEdge/Demos，包括在 github.io.)
若要查看存在色彩對比度問題的元素清單，請在「 對比度問題」中點擊 「文字」。 要在 元素 工具中開啟該元素，請點擊列表中的元素。
為了幫助解決對比度問題，Microsoft Edge DevTools 會自動提供顏色建議;請參見 DevTools (Microsoft Edge 86) 中「新內容」樣式欄中的無障礙顏色建議。
更新：此功能已發布，不再是實驗性功能。
另請參閱:
關於歷史，請參見Chromium開源專案中的議題#1120316。
注意事項
本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可 在此找到，作者為Jecelyn Yeen。
本作品採用 創用CC 姓名標示4.0國際授權條款授權。