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

Sofia Emelianova
Sofia Emelianova
GitHub

效能面板改善項目

這個版本為「Performance」(效能) 面板進行了幾項改善。

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

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

使用選單選項取代「編輯」按鈕的前後對照圖。

追蹤設定模式可讓您變更及隱藏測試群組順序。按一下 arrow_upward 或 arrow_downward 即可移動音軌，或是按一下 visibility_off (隱藏功能)。如要結束設定模式，請按一下底部的「完成測試群組」。這項設定會套用至新的追蹤記錄，但不適用於下一個開發人員工具工作階段。

Chromium 問題：336266699。

忽略火焰圖中的腳本

「主要」測試群組的火焰圖支援忽略清單功能。你現可在圖表中的指令碼上按一下滑鼠右鍵，然後選取「將指令碼新增到忽略清單」。

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

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

Chromium 問題：336266714。

將 CPU 數量縮減 20 倍

「Performance」面板的「Capture settings」部分，「CPU」節流選單會顯示新的「20 倍減速」選項。因此，您現在可以更準確地重現並分析現實生活中的效能問題，即使是在高階電腦上也是如此。

新增「20x 慢動作」的前後變化設為「擷取設定」選項

Chromium 問題：324978881。

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

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

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

詳情請參閱「2024 年以後推出的效能工具」一文。

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

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

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

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

編輯標頭時，如果您輸入了英數字元、連字號和底線以外的任何字元，「網路」面板現在會發出警告。

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

此外，系統會為 chrome:// 網址停用覆寫選單選項和 [編輯] 按鈕，以達到預期的行為。

Chromium 問題：330967147、337012362、328210785。

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

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

「之前和之後」為「無效率記憶體」常見情況新增的篩選器選項。

Chromium 問題：337094903。

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

現在您可以依序前往「Application」>，在專屬的樹狀結構中檢查儲存空間值區。儲存空間區段。這個樹狀結構 (先前稱為實驗性質) 預設為啟用。

「Storage」區段中啟用儲存空間值區樹狀結構的前後差異。

Chromium 問題：338094915。

使用指令列旗標停用 self-XSS 警告

如果您要自動使用 Chrome，或透過指令列開啟開發人員工具進行偵錯，建議您在每個新的開發人員工具工作階段停用 self-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)。
  • Console：現在使用 Ctrl + ` 快速鍵時，只有在焦點移至導覽匣時才會關閉導覽匣中的控制台 (40875466、328210785)。
  • 自動填入：修正地址剖析問題 (335409093、335409707)。
  • 無障礙功能：已修正本地化字串的螢幕閱讀器公告 (324930007)。

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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