這些是 Microsoft Edge DevTools 穩定版的最新功能。
Microsoft Edge DevTools 團隊的公告
CSS 網格除錯功能
Microsoft Edge DevTools 團隊正與 Chrome DevTools 團隊及 Chromium 社群合作，為 DevTools 新增 CSS 網格除錯功能。 你現在可以將格線編號、格線空隙和延伸格線作為頁面覆蓋層顯示。 此外，網格工具也將有更多改進即將推出。
更新：此功能已發布，不再是實驗性功能。
想用樣本嘗試這個實驗，請參考 CSS Grid 規劃器的範例。
Chromium期#1047356
另請參閱:
使用網路控制台進行編輯與重播請求
你現在可以透過網路主控台在網路日誌中使用編輯與重播請求。 打開 網路日誌，右鍵點擊，然後選擇 編輯與重播：
新的 網路主控台 工具會在 DevTools 底部 的快速檢視 面板開啟，並自動填入 HTTP 請求的相關資訊。 要顯示伺服器回覆的回應，請) (編輯請求，然後選擇 發送。
你也可以使用 網路主控台 直接從 DevTools 建立並發送 HTTP 請求。
提示：若要在主 () 面板上方顯示 網路主控台 ，而非 快速檢視 面板，請參考下方「 面板間移動工具」。
更新：此功能已發布，不再是實驗性功能。
Chromium #1093687
服務人員在計時標籤中的事件回應
網路工具的計時標籤現在包含respondWith了服務人員事件。
respondWith服務工作者事件顯示從服務工作者fetch事件處理者開始執行前的時間，到respondWith處理程序的承諾fetch達成為止的時間。
展開 收到的回應 以顯示回應中的 fetch 額外資訊，如 CacheStorageCacheName、 serviceWorkerResponseSource和 ResponseTime。
Chromium期#1066579
另請參閱:
議題面板中的 webhint 回饋
WebHint 是一款開源工具，提供關於網站無障礙性、跨瀏覽器相容性、安全性、效能、PWA 及其他常見網頁開發問題的即時回饋。 您可以在 議題 面板查看網路提示回饋。
要啟用實驗，請參閱 「開啟或關閉實驗 」，並選擇 「啟用網路提示」旁的勾選框。 打開 議題 面板以顯示來自 webhint 的回饋。
Chromium #1070378
另請參閱:
- Visual Studio Code 的 webhint 擴充
- 在 Microsoft Edge DevTools 的實驗性功能中啟用 webhint
在面板間移動工具
過去，像 Elements 和 Network 這類工具只能在 DevTools 的主 (頂) 面板中開啟。 同樣地，像 3D View 和 Issues 這類工具只能在 DevTools 底部的 抽屜 () 快速 檢視 面板中開啟。 你現在可以透過在上下面板間移動工具來自訂你的 DevTools 版面配置。
更新：此功能已發布，不再是實驗性功能。
Chromium期#897944
另請參閱:
- 關於 DevTools 概述中的活動列與快速檢視工具。
網路面板中的改良啟動者提示
在 Microsoft Edge 83 和 84 中，網路 日誌 中顯示的「發起者」欄位（顯示資源請求原因）會以水平捲軸顯示。 你只能透過在提示中橫向捲動來顯示發起請求的呼叫堆疊。
從 Microsoft Edge 85 開始，你現在可以在工具提示中顯示發起者呼叫堆疊，而不必橫向捲動。
Chromium號#1069404
Chromium 計畫的公告
以下章節將宣布 Edge 85 中Microsoft 開放原始碼 Chromium 專案中所貢獻的額外功能。
CSS in-JS 框架的樣式編輯
樣 式 窗格現在對使用 CSS 物件模型 (CSSOM) API 所建立的樣式有更好的支援。 許多 CSS in-JS 框架和函式庫底層使用 CSSOM API 來構建樣式。
你現在可以透過 JavaScript CSSStyleSheet 介面編輯新增的樣式，這是使用 Shadow DOM 建立並發佈可重複使用樣式的新方式。 請參見 CSSStyleSheetCSS 物件模型中的介面 (CSSOM) 。
例如， h1 (CSSStyleSheet CSSOM API 新增的樣式) 過去無法編輯。 這些樣式現在可以在 風格 面板中編輯。
試試這個功能，搭配 使用 CSS-in-JS 的範例。 請參閱 CSS 在 JS 框架中的樣式編輯。
Chromium期 #946975
燈塔面板中的6號燈塔
燈 塔 面板目前運行燈塔6號。 完整變更清單請參閱 v6.0.0 版本釋出說明。
Lighthouse 6.0 為報告引入三項新指標：最大內容性繪 (LCP) 、累積版面偏移 (CLS) ，以及 TBT) (總區塊時間。
效能分數公式也重新加權，以更貼近使用者的載入體驗。
Chromium號#772558
另請參閱:
首次有意義的油漆棄用
First Meaningful Paint (FMP) 在 Lighthouse 6.0 中已被棄用。 FMP 也已從 效能 工具中移除。 最大量的含糊塗料 是FMP的推薦替代品。
Chromium期#1096008
另請參閱:
- MDN詞彙表中首次有意義的油漆 (FMP) 。
- 最大內容豐富的顏料 (LCP) 見MDN詞彙表。
- MDN 最大的ContentfulPaint。
- 燈塔工具
支援新增的 JavaScript 功能
DevTools 現在對部分最新 JavaScript 語言功能有了更好的支援：
可選的串接 語法自動補全。 例如，主控台中的屬性自動補全現在支援可選的連鎖語法
name?.，現在除了 和name[之外也能運作name.。私人 欄位的語法標示。 私有類別欄位現在在 來源 面板中以正確語法標示且印刷得漂亮。
Nullish 合併運算子的語法高亮。 DevTools 現在能在 來源 面板中正確地漂亮地列印空化的合併運算子。
Chromium期 #1073903、#1083214、#1083797
另請參閱:
清單窗格中新增應用程式捷徑警告
在 應用程式 工具中， 應用程式捷徑 幫助使用者快速啟動網頁應用程式中常見或推薦的任務。
在 應用程式 工具中， 清單 面板現在顯示以下狀況的警告：
- 當應用程式的捷徑圖示小於 96x96 像素時，
- 當應用程式的捷徑圖示和清單圖示不是方形 (，因為) 會忽略這些圖示。
Chromium期#955497
另請參閱:
計算窗格的一致顯示
元素工具中的計算窗格現在在所有視窗大小中都一致地顯示為窗格。 過去，當 DevTools 較窄時， 計算 窗格會合併到 樣式 窗格內。
Chromium期#1073899
另請參閱:
- 僅查看實際應用於CSS 特徵參考中的元素的 CSS
WebAssembly 檔案的位元組碼偏移量
DevTools 現在使用位元碼偏移量來顯示 Wasm 反組譯的行號。 行號讓你更清楚看到的是二進位資料，也更符合 Wasm 執行時間對位置的參考方式。Chromium問題#1071432
另請參閱:
在來源面板中逐行複製與剪輯
在原始 碼面板編輯器中執行複製或剪切時，DevTools 會複製或剪切當前內容行。
Chromium期#800028
主機設定更新
取消群組相同的控制台訊息
主控台設定中的 「群組類似 」切換現在適用於重複訊息。 之前只適用於類似的訊息。
例如，之前 DevTools 沒有將訊息取消群組 hello ，儘管「 群組相似 」未勾選。 現在， hello 訊息已經拆分了。
試試這個功能，並用一個 範例發送重複訊息到控制台。
Chromium #1082963
另請參閱:
- 關閉主機功能參考中的訊息分組
持續保存 選擇僅上下文的設定
主控台設定中僅 選中情境 限定的設定現在會被保留。 以前每次關閉再重新開啟 DevTools 時，設定都會被重置。 這個改動讓設定行為和其他控制台設定選項一致。
Chromium期#1055875
另請參閱:
- 過濾來自不同 JavaScript 情境的訊息 ——在 Console 功能參考中
表演小組更新
JavaScript 編譯快取資訊於 效能 工具中
JavaScript 編譯快取資訊現在總是顯示在效能工具的摘要面板中。 過去，DevTools 不會顯示任何與程式碼快取相關的內容，前提是程式碼快取沒有發生。
Chromium #912581
另請參閱:
性能面板中的導航時序對齊
過去， Performance 工具會根據錄影開始時間顯示尺子的時間。 現在錄影的時間點已經改變，使用者自行導航。 DevTools 現在顯示尺的時間相對於導航，而不是錄影開始的時間。
DOMContentLoaded首次繪畫、首次完整繪畫及最大內容繪畫事件的時間會更新為相對於導航起始點，表示時間與報告的時間PerformanceObserver相符。
Chromium 第期 #974550
另請參閱:
新增斷點、條件斷點和對數點圖示
更新：截至 2022 年，斷點現在以藍色矩形表示，而非紅色圓圈。
來源面板新增了斷點、條件斷點和對數點的設計。 中斷點以紅色圓圈表示，就像 Visual Studio Code 和 Visual Studio 一樣。 圖示被加入以區分條件斷點與對數點。
Chromium號#1041830
另請參閱:
注意事項
本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可 在此找到，作者為Jecelyn Yeen。
本作品採用 創用CC 姓名標示4.0國際授權條款授權。