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

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

提示

Microsoft Build 2023 大會於 2023 年 5 月 23 日至 25 日舉行。 在下列影片中深入了解 DevTools 中記憶體、效能和生產偵錯的新功能，以及提要欄位、WebView2 和 Chat 外掛程式中的 PWA 新功能：

影片：DevTools 113 和 114 的新功能

影片「DevTools 113 和 114 的新功能」的縮圖影像

[效能] 工具中的彙總選取器統計資料

Microsoft Edge 109 新增了 選取器統計資料 功能到 效能 工具。 您可以使用「選取器統計資料」中的資料來了解哪些CSS選取器在「效能」工具中「重新計算樣式」事件期間花費最多時間，並導致效能變慢。

在 Microsoft Edge 114 中，您不再需要選取個別的 [重新計算樣式 ] 事件，即可查看在該事件期間重新計算的選取器。 相反地，位於「效能」工具底部窗格中的「選取器統計資料」索引標籤會自動彙總記錄的設定檔中所有「重新計算樣式」事件的資料。 當您放大設定檔的特定部分時， 選取器統計資料 索引標籤會更新，以僅顯示您目前正在分析的設定檔部分的資料。

此外，已將新的 樣式表 欄新增至 選取器統計資料 標籤。「 樣式表」 欄包含每個選取器的連結，可返回定義選取器的樣式表。

選取器統計資料現在會彙總在記錄的設定檔目前顯示區段中的重新計算樣式事件

感謝您使用 選取器統計資料 功能，並在 GitHub 中與我們分享您的意見反應 問題 #98：[意見反應] 選取器效能追蹤解說！

另請參閱:

[問題] 工具和 [樣式] 窗格會針對觸發版面配置的 CSS 屬性提出警告

DevTools 現在會偵測並警告在網頁中使用 CSS 動畫時，可能會造成版面配置型效能問題的 CSS 屬性，例如移動文字。 版面配置 是網頁瀏覽器處理程序，用於重新計算文件中元素的位置和幾何形狀，以重新轉譯文件的一部分或全部。 由於版面配置是瀏覽器中的使用者封鎖作業，建議您盡可能限制版面配置，以保持網頁內容順暢且回應互動。

某些 CSS 屬性不會觸發版面配置作業，因為它們會在瀏覽器的撰寫器執行緒上執行，例如 轉換 和 不透明度。 不過，即使是未觸發版面配置的 CSS 屬性，也可能觸發繪製作業，與 CSS 動畫搭配使用時，可能會對效能造成負面影響。

在 [元素] 工具的 [樣式] 窗格中，已在觸發 [版面配置] 或 [繪製] 作業的 CSS 屬性上新增波浪狀底線和工具提示。 若要在工具提示中檢視問題，請將游標停留在波浪底線上：

[樣式] 窗格中的 CSS 版面配置問題

在 [問題 ] 工具的 [ 效能 ] 類別中，會回報一種新的問題，例如「變更此屬性會觸發：『版面配置』，這可能會在內部 @Keyframes使用時影響效能。」當您使用 [樣式 ] 窗格時，若要在 [問題 ] 工具中開啟問題，請 按 Shift+按一下這類屬性上的波浪底線，或以滑鼠右鍵按一下波浪底線，然後選取 [ 檢視問題]。 [ 問題] 工具會在 [開發工具] 底部的 [選單 ] (現在的 [ 快速檢視 ] 面板中開啟) ：

問題工具中的 CSS 版面配置問題

另請參閱:

[記憶體] 工具可以載入大於 1 GB 的增強追蹤

在舊版的 Microsoft Edge 中，載入大於 1 GB 的增強追蹤失敗。 在 Microsoft Edge 114 中，這個問題已經修正。 您現在可以成功載入任何大小的增強追蹤。

增強的追蹤是 Microsoft Edge 中的實驗性功能，可讓您匯出及匯入整個 DevTools 執行個體，並儲存為 .devtools 檔案，並在 記憶體、 效能、 元素、 主控台和 來源 工具之間儘可能保留狀態。 .devtools檔案會在個別的 DevTools 執行個體中開啟，並載入下列追蹤資訊，同時保留原始程式碼的參照：

  • DOM 快照集。
  • 主機訊息。
  • 堆積快照集。
  • 效能設定檔。

增強的追蹤

另請參閱:

記憶體工具更精確地比較兩個堆積快照

在 [記憶體] 工具中，您可以建立多個堆積快照並進行比較，以找出堆積中物件的差異。 在舊版的 Microsoft Edge 中， 記憶體 工具在比較堆積快照集時會報告太多新的和刪除的物件，因為該工具未一致地追蹤物件識別碼。 實際上，其中許多很可能是相同的物體。

在 Microsoft Edge 114 中，已修正此問題，方法是確保跨多個快照集追蹤一致的物件識別碼。

比較 Microsoft Edge 114 中的兩個堆積快照集

另請參閱:

CSS 概觀工具的協助工具增強功能

在 Microsoft Edge 112 中，已更新 CSS 概觀 工具，以便在拍攝網頁 CSS 概觀快照集時顯示非簡單的選擇器清單。 在 Microsoft Edge 114 中，CSS 概觀工具的非簡單選取器區段現在更容易與輔助技術搭配使用，例如螢幕助讀程式。

當您按一下選取器，或瀏覽至選取器然後按 Enter 時，螢幕助讀程式現在會讀出「複製的 CSS 選取器」：

使用鍵盤瀏覽 CSS 概觀工具

另請參閱:

適用於 VS Code 的開發工具延伸模組更能支援高對比模式

在先前版本的 Visual Studio Code Microsoft Edge 開發工具擴充功能中，在高對比模式下，將游標停留在工具內的圖示上時，無法以足夠的對比呈現 UI 控制項。 我們已修正此問題。

例如，在 [元素] 工具的 [樣式] 窗格中，用於將樣式套用至元素的核取方塊現在可在高對比模式下正確呈現：

在 VS Code 擴充功能中，以高對比模式的 [樣式] 窗格中的核取方塊停留

此外，在 [主控台 ] 工具中， 像是 [顯示主機] 提要欄位 等圖示現在可在高對比模式下正確轉譯：

在 VS Code 擴充功能中，以高對比模式將游標停留在 [顯示主機] 側邊欄按鈕上

另請參閱:

來自 Chromium 專案的公告

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

另請參閱

  • 上次更新時間：