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

Sofia Emelianova
Sofia Emelianova
GitHub

效能面板改善項目

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

使用新版測試群組設定模式移動及隱藏音軌

您現在可以在測試群組名稱上按一下滑鼠右鍵，然後選取「設定測試群組」，即可進入測試群組設定模式。需要額外空間的編輯按鈕已移除。

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

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

Chromium 問題：336266699。

忽略火焰圖中的指令碼

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

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

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

Chromium 問題：336266714。

將 CPU 數量縮減 20 倍

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

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

Chromium 問題：324978881。

「效能洞察」面板即將淘汰

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

「效能洞察」面板中的淘汰警告橫幅。

詳情請參閱「2024 年後的效能工具」。

歡迎提供意見，告訴我們哪些功能運作正常，以及哪些部分有待改進，歡迎與我們分享。

貼上整個標頭字串即可覆寫

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

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

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

如果標頭名稱含有不支援的字元，旁邊就會顯示警告。

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

Chromium 問題：330967147、337012362、328210785。

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

「記憶體」面板中的「堆積快照」會提供新的篩選器，協助您找出記憶體使用效率不彰的常見情況，例如重複字串、卸離 DOM 節點所保留的物件，以及開發人員工具控制台。

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

Chromium 問題：337094903。

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

您現在可以在「應用程式」>「儲存空間」部分，查看專屬樹狀結構中的儲存空間桶。這個樹狀結構 (先前稱為實驗性質) 預設為啟用。

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

Chromium 問題：338094915。

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

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

控制台中的 self-xs 警告對話方塊。

只要將 --unsafely-disable-devtools-self-xss-warnings 指令列標記傳遞至 Chrome，即可停用這個對話方塊。

Chromium 問題：41491762。

Lighthouse 12.0.0

「Lighthouse」面板現在執行 Lighthouse 12.0.0 版。

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

如要瞭解在開發人員工具中使用「Lighthouse」面板的基本概念，請參閱「Lighthouse：最佳化網站速度」。

Chromium 問題：772558。

其他精選內容

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

  • 效能：
    • 慢速擷取設定 (「啟用進階繪製檢測」和「啟用 CSS 選取器統計資料」) 現在會在下一個開發人員工具工作階段中自動清除。
    • 現在當您縮放火焰圖和資料變更時，「選取器統計資料」分頁不會自動捲動至底部 (337999939)。
  • 主控台：現在只有在主控台獲得焦點時，按下 Ctrl + ` 快速鍵才能關閉主控台 (40875466、328210785)。
  • 自動填入：已修正地址剖析問題 (335409093、335409707)。
  • 無障礙功能：已修正本地化字串的螢幕閱讀器公告 (324930007)。

下載預覽管道

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

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

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

開發人員工具的新功能

「開發人員工具新功能」系列中的所有文章清單。