DevTools (Microsoft Edge 109) 的新功能

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

影片：DevTools 109 的新功能

影片「DevTools 109 的新功能」的縮圖影像

使用新的增強追蹤功能匯入和匯出 DevTools 執行個體

在 Microsoft Edge 109 中，您可以開啟新設定，以從 效能 和 記憶體 工具匯出增強的追蹤。 這些增強的追蹤包含更多資訊，例如：

  • 記錄到主控台的訊息。
  • 錄製時正在頁面上執行的 JavaScript。
  • DOM 的快照。

儲存效能設定檔、堆積快照、配置時間表或配置取樣時，您現在可以匯出新的 .devtools 檔案格式。 接著匯入 .devtools 檔案時，DevTools 的新執行個體隨即開啟，並保留 Elements、 主控台和 來源 工具的狀態。 這些增強的追蹤提供強大的新方式來共同作業和共用 DevTools 中的資訊。

若要嘗試增強的追蹤功能：

  1. 在開發工具中，按一下 [ 設定] ([ 設定] 圖示) 按鈕。

  2. 在 [偏好設定] 頁面的 [持久性] 區段中，選取 [匯出增強效能和記憶體追蹤] 核取方塊：

    設定 > 、喜好設定 > 、持久性核取方塊

  3. 如果您想要保留主控台訊息、JavaScript 或 DOM 快照，請選取對應的核取方塊。

  4. 按一下 DevTools 設定中的 [關閉 (x x) ] 按鈕。

  5. 在 [效能 ] 工具中，進行錄製。

  6. 按一下 [儲存設定檔] ([儲存設定檔] 圖示) 按鈕。

  7. 在 [另存新檔] 對話方塊中，儲存新 .devtools 檔案。

匯入：

  1. 按一下 [載入設定檔] ([載入設定檔] 圖示) 按鈕，從「效能」工具中匯入.devtools檔案：

    從效能工具內匯入追蹤

  2. 此時會開啟新的 DevTools 視窗，其中包含工具的子集，包括隨您剛才記錄的設定檔載入的 效能 工具。 「元素」、「主控台」和「來源」工具也會預先填入其保留狀態：

    追蹤匯入主控台

您也可以使用新的.devtools檔案格式從「記憶體」工具匯出。 這是開發工具小組正在積極試驗的新功能，因此請在 [意見反應] 增強追蹤實驗 #122 中傳送您的意見反應給我們。

另請參閱:

使用新的選取器統計資料偵錯長時間執行的 Recalculate Style 事件

在 Microsoft Edge 109 中，在 [效能] 工具中，您可以在 [效能] 工具中開啟 [啟用進階轉譯檢測 (慢) ] 設定，以存取新的選取器統計資料功能。

開啟此設定時：

  1. 選取 [ 錄製]，然後在網站或應用程式上執行您想要改善的案例。

  2. 選取 [停止]。

  3. 選取 [重新計算樣式] 事件。 在 [效能 ] 工具底部區段中，選取 選取器 [統計資料 ] 索引標籤：

    效能工具設定 [啟用進階轉譯檢測 (慢) ] 核取方塊，以及 [選取器統計資料] 索引標籤

選取 器統計資料 索引標籤提供在 重新計算樣式 事件期間由瀏覽器引擎計算的所有CSS選取器清單。 您可以根據選取器處理所花費的 經過 時間，或符合 ([ 相符計數 ] 欄) 的元素數目來排序選取器。 使用此資料來：

  • 尋找瀏覽器處理時間較長的選取器，並加以簡化。
  • 讓選取器更具體，以改善效能。

另請參閱:

追蹤配置取樣時由廢棄項目收集捨棄的物件

在 Microsoft Edge 109 中，記憶體工具中的配置取樣分析類型現在有兩個新選項：

  • 包含主要 GC 捨棄的物件。

  • 包含次要 GC 捨棄的物件。

如果不選取這些選項， [記憶體] 工具將繼續像之前一樣運作，報告在分析工作階段結束時仍處於作用中的配置。 在此模式中，配置取樣不會追蹤產生的物件，以及經過垃圾收集 (GC) 然後消失的物件。

如果您想要追蹤網站或應用程式產生的垃圾，請選取這兩個選項。 在產生的設定檔中，您將能夠看到由 JavaScript 函數產生的垃圾，然後經過 GC 處理。 如果您想要減少程式碼產生的垃圾量，請使用這些選項。 若要深入了解主要與次要 GC 之間的差異，請參閱 Trash talk： Orinoco 垃圾收集器。

配置取樣分析選項

另請參閱:

適用於 DevTools 的堆積快照視覺化工具延伸功能

將新的堆 積快照集視覺化工具 擴充功能新增至 Microsoft Edge，以取得堆積快照集檔案中資料的新視覺化效果。 安裝此擴充功能會在開發工具中新增堆 積快照集視覺化工具 。 在 [堆積快照集視覺化工具 ] 工具中，您可以載入堆積快照集檔案，以查看它以有向圖或樹狀結構表示。 這些新的視覺效果可讓您探索從垃圾收集 (GC) 根目錄到個別節點的保留鏈。

圖表檢視：

圖表模式中的堆積快照集視覺化工具

樹狀檢視：

樹狀模式的堆積快照視覺化工具

另請參閱:

對焦點模式中的快速檢視的改進

我們聽取了您的意見反應，並改進了焦點模式中的 快速檢視 選項。 現在您可以按一下 [其他工具] ([其他工具] 圖示) 按鈕來選取任何開發工具工具，而不是在快速檢視下拉式清單中僅提供工具的子集，就像在開發工具的主要工具列中一樣。 在開發工具的 [ 快速檢視 ] 面板中載入任何工具，以同時顯示多個工具。

[快速檢視] 工具列的狀態會跨 DevTools 工作階段持續存在。 如果您在 DevTools 的上方窗格中開啟相同的工具，[ 快速檢視 ] 面板會自動摺疊。

新增工具至 [快速檢視] 面板

發生語音命令使用者無法瀏覽至 [元素] 工具中的 [樣式] 索引標籤或 [計算] 索引標籤的協助工具問題。 現在，您可以透過 [命令功能表] 中的兩個新命令來存取這些索引標籤：

  • 顯示樣式
  • 顯示計算樣式

含有 [顯示樣式] 和 [顯示計算樣式] 命令的命令功能表

另請參閱:

來自 Chromium 專案的公告

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

另請參閱

  • 上次更新時間：