開發工具的新功能 (Microsoft Edge 85)

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

來自 Microsoft Edge 開發工具小組的公告

CSS 網格偵錯功能

Microsoft Edge 開發工具小組正在與 Chrome 開發工具小組和 Chromium 社群合作，將新的 CSS 網格偵錯功能新增至開發工具。 您現在可以將格線編號、格線間隙和延伸格線顯示為頁面上的重疊。 此外，格線工具的更多改進即將推出。

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

若要嘗試使用範例進行實驗，請參閱 CSS 格線規劃工具範例。

Chromium問題 #1047356

另請參閱:

• 檢查 CSS 格線版面配置

使用網路主控台編輯和重新執行要求

您現在可以使用網路主控台，對網路記錄中的要求使用 [編輯] 和 [重新執行]。 開啟 [網路記錄]，按一下滑鼠右鍵，然後選取 [編輯並重播]：

新的 網路主控台 工具會在開發工具底部的 快速檢視 面板中開啟，並自動填入 HTTP 要求的資訊。 若要顯示從伺服器傳回的回應，請視需要編輯要求 () ，然後選取 [ 傳送]。

您也可以使用 網路主控台 ，直接從開發工具建立和傳送 HTTP 要求。

提示：若要將 網路主控台 顯示在主 (頂端) 面板中，而不是在快速 檢視 面板中顯示，請參閱下方的 在面板之間移動工具。

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

Chromium問題 #1093687

服務工作者回應與 [時間] 索引標籤中的事件

[網路] 工具的 [計時] 索引標籤現在包含 respondWith Service Worker 事件。 Service Worker 事件顯示respondWith從 Service Worker fetch 事件處理常式開始執行之前的時間，到處理常式的 fetch Promise 結算的時間為止respondWith的持續時間。

展開 [收到的回應] 以顯示回應中的 fetch 其他資訊，例如 CacheStorageCacheName、 serviceWorkerResponseSource和 ResponseTime。

Chromium問題 #1066579

另請參閱:

• 在 [網路功能參考] 中顯示要求的時序關係。
• 在 [網路功能參考] 中顯示要求的時間明細。

[問題] 面板中的 webhint 意見反應

2026 年 7 月更新： WebHint 已從 Microsoft Edge 151 中移除。

WebHint 是一個開源工具，可提供有關網站的可訪問性、跨瀏覽器兼容性、安全性、性能、PWA 和其他常見 Web 開發問題的實時反饋。 您可以在 [ 問題] 面板中檢視 webhint 意見反應。

若要啟用實驗，請參閱 開啟或關閉實驗 ，然後選取 [ 啟用 WebHint] 旁的核取方塊。 開啟 [問題] 面板以顯示來自 webhint 的意見反應。

Chromium問題 #1070378

另請參閱:

• Visual Studio Code 的 webhint 擴充功能

在面板之間移動工具

以前， 元素 和 網路 等工具只能在開發工具的主要 (頂端) 面板中開啟。 同樣地， [3D 檢視 ] 和 [問題] 等工具只能在 [ 選單 ] 中開啟， (現在位於 [開發工具] 底部的 [ 快速檢視 ] 面板) 開啟。 您現在可以在頂端和底部面板之間移動工具，以自訂 DevTools 配置。

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

Chromium問題 #897944

另請參閱:

• 關於開發工具概觀中的活動列和快速檢視工具。

改良 [網路] 面板中的 [啟動器] 工具提示

在 Microsoft Edge 83 和 84 中，以水平捲軸顯示的 [網路記錄 ] 中的 [啟動器] 欄的工具提示，顯示資源要求的原因。 您只能透過在工具提示中水平捲動，來顯示啟動要求的呼叫堆疊。

從 Microsoft Edge 85 開始，您現在可以在工具提示中顯示啟動程式呼叫堆疊，而不需要水平捲動。

Chromium問題 #1069404

來自 Chromium 專案的公告

下列各節宣布 Microsoft Edge 85 中已參與 開放原始碼 Chromium 專案的其他可用功能。

CSS-in-JS 架構的樣式編輯

[ 樣式] 窗格現在可更完善地支援編輯使用 CSS 物件模型 (CSSOM) API 建立的樣式。 許多 CSS-in-JS 框架和庫在後台使用 CSSOM API 來建構樣式。

您現在可以使用介面編輯 CSSStyleSheet 在 JavaScript 中新增的樣式，這是使用 Shadow DOM 時建立和散發可重複使用樣式的新方式。 請參閱 CSS 物件模型 (CSSOM) 中的介面。CSSStyleSheet

例如， h1 使用 CSSStyleSheet (CSSOM API 新增的樣式) 先前無法編輯。 現在您可以在 [樣式 ] 面板中編輯這些樣式。

使用 使用 CSS-in-JS 的範例來嘗試此功能。 請參閱 CSS-in-JS 架構的樣式編輯。

Chromium問題 #946975

Lighthouse 面板中的 Lighthouse 6

Lighthouse 面板現在正在執行 Lighthouse 6。 如需所有變更的完整清單，請參閱 v6.0.0 版本資訊。

Lighthouse 6.0 在報告中引進了三個新計量：LCP) 的最大內容繪製 (、CLS) (累積版面配置偏移，以及 TBT) (總封鎖時間。

效能評分公式也進行了重新加權，以更好地反映使用者的載入體驗。

Chromium問題 #772558

另請參閱:

• Lighthouse 工具

第一次有意義的 [小畫家] 淘汰

在 Lighthouse 6.0 中已過時 (FMP) 第一個有意義的小畫家。 FMP 也已從 [效能 ] 工具中移除。 建議您使用 [Largest Contentful Paint] 取代 FMP。

Chromium問題 #1096008

另請參閱:

• 第一個有意義的繪畫 (FMP) 在 MDN 的詞彙表中。
• MDN 詞彙表中最大的內容 (LCP) 。
• MDN 的 LargestContentfulPaint。
• Lighthouse 工具

支援新的 JavaScript 功能

DevTools 現在更完善地支援一些最新的 JavaScript 語言功能：

• 選擇性鏈結 語法自動完成。 主控台中的屬性自動完成現在支援選用的鏈結語法，例如，name?.現在可以在 和 name[之外運作name.。

• 私人欄位的語法醒目提示。 私人類別欄位現在在 [ 來源 ] 面板中正確醒目提示語法並漂亮地列印。

• Nullish 合併運算子的語法醒目提示。 DevTools 現在可以在 [來源 ] 面板中正確地列印 nullish 合併運算子。

Chromium問題 #1073903、#1083214、#1083797

另請參閱:

• 在主控台中執行 JavaScript
• JavaScript 偵錯功能

[資訊清單] 窗格中的新應用程式捷徑警告

在 應用程式 工具中， 應用程式捷徑 可協助使用者快速開始 Web 應用程式內的常見或建議工作。

在 [應用程式 ] 工具中， [資訊清單 ] 窗格現在會顯示下列情況的警告：

• 當應用程式捷徑圖示小於 96x96 像素時。
• 當應用程式捷徑圖示和資訊清單圖示不是方形 (，因為) 會忽略圖示。

Chromium問題 #955497

另請參閱:

• [應用程式] 工具，用於管理儲存空間

[計算] 窗格的一致顯示

[元素] 工具中的 [計算] 窗格現在會一致地顯示為跨所有視口大小的窗格。 之前，當開發工具較窄時，[ 計算] 窗格會在 [ 樣式 ] 窗格內合併。

Chromium問題 #1073899

另請參閱:

• 僅檢視實際套用至CSS 功能參考中元素的 CSS

WebAssembly 檔案的位元組碼位移

Chromium問題 #1071432

另請參閱:

• 使用記憶體檢查器工具檢查 JavaScript ArrayBuffer

在 [來源] 面板中按行複製和剪下

在 [來源] 面板編輯器中執行沒有選取項目的複製或剪下時，開發工具會複製或剪下目前的內容行。

Chromium問題 #800028

主機設定更新

將相同的主機訊息取消群組

主機設定中的 [群組類似 ] 切換現在適用於重複的郵件。 先前它僅適用於類似的郵件。

例如，先前，即使未選取 [將類似群組] ，DevTools 也不會將郵件取消群組hello。 現在， hello 郵件已取消分組。

使用傳送 重複訊息至主機的範例，試試此功能。

Chromium問題 #1082963

另請參閱:

• 在 [主機功能參考] 中關閉郵件分組

保留選取的僅限內容設定

現在會保留 [主機設定] 中的 [ 僅選取內容 ] 設定。 先前，每次關閉再重新開啟 DevTools 時，設定都會重設。 此變更可讓設定行為與其他主機設定選項一致。

Chromium問題 #1055875

另請參閱:

• 篩選掉來自不同 JavaScript 內容的訊息 - 在主控台功能參考中

效能面板更新

效能工具中的 JavaScript 編譯快取資訊

JavaScript 編譯快取資訊現在一律顯示在「效能」工具的「摘要」面板中。 先前，如果程式碼快取未發生，DevTools 不會顯示任何與程式碼快取相關的內容。

Chromium問題 #912581

另請參閱:

• 效能功能參考

[效能] 面板中的導覽時序對齊方式

之前， [效能 ] 工具會根據錄製開始的時間在尺規中顯示時間。 錄製內容的時間現在已變更，使用者瀏覽的位置。 DevTools 現在會顯示相對於瀏覽的尺規時間，而不是錄製開始的時間。

、First Paint、First Contentful Paint 和 Largest Contentful Paint 事件的時間 DOMContentLoaded已更新為相對於導覽開始，這表示時間符合 所報告 PerformanceObserver的時間。

Chromium 問題 #974550

另請參閱:

• 效能功能參考

中斷點、條件中斷點和記錄點的新圖示

更新：自 2022 起，中斷點現在以藍色矩形表示，而不是紅色圓圈。

「 來源」 面板具有新的中斷點、條件中斷點和記錄點設計。 中斷點以紅色圓圈表示，就像 Visual Studio Code 和 Visual Studio 一樣。 新增圖示以區分條件斷點和記錄點。

Chromium問題 #1041830

另請參閱:

• 使用中斷點暫停程式碼

本作品已根據 知識共享署名 4.0 國際許可證獲得許可。

另請參閱

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