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

Sofia Emelianova
Sofia Emelianova

效能面板改善項目

這個版本針對「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 問題:330967147337012362328210785

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

「記憶體」面板中的「堆積快照」會提供新的篩選器,協助您找出記憶體使用效率不彰的常見情況,例如重複字串、卸離 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 + ` 快速鍵才能關閉主控台 (40875466328210785)。
  • 自動填入:已修正地址剖析問題 (335409093335409707)。
  • 無障礙功能:已修正本地化字串的螢幕閱讀器公告 (324930007)。

下載預覽管道

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

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

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

開發人員工具的新功能

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