開發人員工具、Chrome 126 的新功能'

Sofia Emelianova
Sofia Emelianova
GitHub

效能面板改善

這個版本針對「Performance」面板進行了多項改善。

使用更新的曲目設定模式移動及隱藏曲目

您現在可以按一下音軌名稱，然後選取「Configure tracks」，即可進入音軌設定模式。需要額外空間的編輯按鈕已移除。

將編輯按鈕替換為選單選項前後的畫面。

您可以透過軌道設定模式變更軌道的順序，也可以隱藏軌道。點選「arrow_upward」或「arrow_downward」可上下移動音軌，或點選「visibility_off」可隱藏音軌。如要退出設定模式，請按一下底部的「完成追蹤項目設定」。這項設定會保留在新追蹤記錄中，但不會保留在下一個 DevTools 工作階段中。

Chromium 問題：336266699。

忽略火焰圖中的指令碼

Main 追蹤記錄中的火焰圖表新增了忽略清單支援功能。你現在可以在圖表中按一下指令碼的滑鼠右鍵，然後選取「將指令碼加入忽略清單」。

選單選項，可在「設定」中新增指令碼至忽略清單、標示為已忽略的指令碼，以及對應的規則。

圖表會收合已忽略的指令碼，並將其標示為「已加入忽略清單」，然後將其加入「設定」中的「自訂排除規則」 >「忽略清單」。系統會保留遭到略過的腳本，直到您從追蹤記錄或自訂排除規則中移除為止。

Chromium 問題：336266714。

將 CPU 節流 20 倍

「Performance」面板的「Capture settings」中，「CPU」節流選單新增「20x slowdown」選項。因此，即使是在高階電腦上，您現在也能更準確地重現及分析實際效能問題。

在「擷取設定」中加入「20 倍慢動作」選項前後的效果。

Chromium 問題：324978881。

效能深入分析面板即將淘汰

實驗性的「效能深入分析」面板將於 2024 年淘汰。開發人員工具團隊正在努力將最實用的功能整合至「效能」面板。「成效洞察」面板現在會在頂端顯示橫幅，說明即將淘汰的功能。

「效能深入分析」面板中的淘汰警告橫幅。

如需更多資訊，請參閱「2024 年後的效能工具」。

如果您對哪些功能實用、哪些功能不實用，或認為哪些功能可以改善有任何意見，歡迎與我們分享。

貼上完整的標頭字串來覆寫標頭

覆寫標頭時，您現在可以貼上整個標頭字串 (HEADER_NAME: VALUE)，開發人員工具會將 : 處的字串分割為標頭名稱及其值。

請觀看以下影片，瞭解實際操作方式。

編輯頁首時，如果您輸入的字元不是英數字元、連字號和底線，系統會在「Network」面板中發出警告。

標頭名稱旁的警告，表示標頭名稱含有不支援的字元。

此外，系統會停用 chrome:// 網址的覆寫選單選項和「編輯」按鈕，這與預期的行為相符。

Chromium 問題：330967147、337012362、328210785。

使用堆積快照中的新篩選器找出過度使用記憶體的情況

「記憶體」面板中的「堆積圖快照」會取得新的篩選器，協助您找出記憶體使用率不佳的常見情況，例如重複字串、由分離的 DOM 節點和開發人員工具「控制台」保留的物件。

在新增篩選器選項前後，記憶體使用效率不佳的常見情況。

Chromium 問題：337094903。

在「應用程式」>「儲存空間」中檢查儲存空間值區

您現在可以在「應用程式」 >「儲存空間」部分，查看專屬樹狀結構中的儲存空間桶。這棵樹狀圖先前為實驗功能，現在已預設啟用。

在「儲存空間」專區中啟用儲存空間值區樹狀結構前後的畫面。

Chromium 問題：338094915。

使用指令列標記停用自我 XSS 警告

如果您要自動化 Chrome 使用情形，或透過指令列開啟開發人員工具進行偵錯，通常會想停用每次新開發人員工具工作階段中顯示的自體 XSS 警告。

控制台中的自體 XSS 警告對話方塊。

您現在可以將 --unsafely-disable-devtools-self-xss-warnings 指令列旗標傳遞至 Chrome，藉此停用此對話方塊。

Chromium 問題：41491762。

Lighthouse 12.0.0

Lighthouse 面板現在會執行 Lighthouse 12.0.0。

這次更新帶來許多變更，包括移除 PWA 類別、重新整理 SEO 類別、淘汰整體節省金額、新增稽核項目和稽核變更。請參閱完整變更清單。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

其他精選內容

以下是這個版本中值得注意的修正和改善項目：

  • 成效：
    • 慢速擷取設定 (「Enable advanced paint instrumentation」和「Enable CSS selector stats」) 現已在下一個開發人員工具工作階段中自動清除。
    • 當您放大火焰圖表，且資料發生變更時，「Selector Stats」分頁現在不會自動捲動至底部 (337999939)。
  • 主控台：現在只有在主控台在焦點時，Ctrl + ` 快速鍵才能關閉抽屜中的主控台 (40875466、328210785)。
  • 自動填入：已修正地址剖析問題 (335409093、335409707)。
  • 無障礙功能：已修正本地化字串的螢幕閱讀器廣播內容 (324930007)。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。