共用方式為

Microsoft Edge 109 (DevTools 的新功能)

  • 發行項

這些是 Microsoft Edge DevTools 穩定版本中的最新功能。

影片：DevTools 109 的新功能

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

使用新的增強追蹤功能匯入和導出DevTools實例

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

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

儲存效能配置檔、堆積快照集、配置時程表或配置取樣時，您現在可以匯出新的 .devtools 檔案格式。 當您接著匯入 .devtools 檔案時，會開啟 DevTools 的新實例，並保留您的 Elements、 Console 和 Sources 工具的狀態。 這些增強的追蹤提供強大的新方式，可在您的DevTools中共同作業和共用資訊。

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

  1. 在 DevTools 中，按兩下 [ 設定 (設定] 圖示) 按鈕。

  2. 在 [喜好設定] 頁面的 [持續性] 區段中，選取 [匯出增強效能和記憶體追蹤] 複選框：

    [設定喜 > 好設定 > 持續性] 複選框

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

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

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

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

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

進口：

  1. 點選單擊 [.devtools載入設定檔] ([載入設定檔] 圖示) 按鈕，從效能工具內匯入檔案：

    從效能工具內匯入追蹤

  2. 新的 DevTools 視窗隨即開啟，其中包含工具的子集，包括以您剛才錄製的配置檔載入的效能工具。 專案、主控台和來源工具也會預先填入其保留狀態：

    追蹤匯入主控台

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

另請參閱:

使用新的選取器統計數據對長時間執行的重新計算樣式事件進行偵錯

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

開啟此設定時：

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

  2. 選取 [停止]。

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

    效能工具設定 [啟用進階轉譯檢測 () 變慢] 複選框和 [選取器統計數據] 索引標籤

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

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

另請參閱:

追蹤配置取樣時垃圾收集捨棄的物件

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

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

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

如果沒有選取這些選項， 記憶體 工具會如先前一樣繼續運作，並報告在分析會話結束時仍在運作的配置。 在此模式中，配置取樣不會追蹤產生和垃圾收集 (GC'd) 然後消失的物件。

如果您想要追蹤網站或應用程式所產生的垃圾，請選取這兩個選項。 在產生的配置檔中，您將能夠看到當時是 GC'd 的 JavaScript 函式所產生的垃圾。 如果您想要減少程式代碼產生的垃圾量，請使用這些選項。 若要深入瞭解主要和次要 GC 之間的差異，請參閱 垃圾桶交談：Orinoco 垃圾收集行程。

配置取樣分析選項

另請參閱:

嘗試 DevTools 的新堆積快照集可視化檢視延伸模組

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

圖表檢視：

圖形模式中的堆積快照式可視化檢視

樹檢視：

樹狀結構模式中的堆積快照可視化檢視

另請參閱:

在焦點模式中快速檢視的改善

我們已聆聽您的意見反應，並改善了焦點模式中的 快速檢視 選項。 您現在可以按兩下 [其他工具] ([更多工具] 圖示) 按鈕，例如在DevTools的主要工具列中，選取任何DevTools工具，而不是只在 [快速檢視] 下拉式清單中提供工具的子集。 在 DevTools 的 [快速檢視 ] 面板中載入任何工具，以同時顯示多個工具。

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

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

有一個輔助功能問題，即語音命令使用者無法流覽至 [元素] 工具中的 [樣式] 索引卷標或 [計算] 索引標籤。 您現在可以透過命令選單中的兩個新命令來存取這些索引標籤：

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

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

另請參閱:

來自 Chromium 專案的公告

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

另請參閱