發布日期：2025 年 3 月 19 日
我們持續致力於改善 Chrome 效能工具，很高興在此宣布，我們進一步升級了 DevTools 效能面板的互動方式。這些改善項目旨在提升您瀏覽效能追蹤記錄的能力，並減少不相關的雜訊，讓您能專注於快速追蹤及解決效能問題。
改善導覽功能
許多使用者反映，在「效能」面板中捲動和縮放時，介面不夠直覺。雖然許多長期使用者都習慣這種做法，但許多人希望捲動手勢可以捲動，而不是放大或縮小追蹤記錄。
下方新增的選項可讓您在現有的「傳統」捲動方式和新的「現代」捲動方式之間切換。
在傳統模式中，透過觸控板或滾輪捲動時，系統會持續放大及縮小畫面，而按住 Shift 鍵並捲動時，系統會在火焰圖中上下捲動。
在新的現代模式中，這些功能會互換：捲動現在會捲動火焰圖，而按住 Shift 鍵並捲動則會縮放。
鍵盤快速鍵 (例如使用 WASD 瀏覽追蹤記錄) 將繼續正常運作。
雙向傳輸總覽
「Performance」面板頂端附近有「CPU」圖表，這是時間軸總覽的一部分。這項資訊會顯示追蹤記錄期間的 CPU 用量估計值，並依工作類型細分 (例如，橘色代表指令碼執行作業，紫色代表轉譯作業)。
這可提供追蹤記錄的總覽 (有時稱為迷你地圖)，即使您深入調查特定問題，也能提供整個時程表的概要資料。
不過，如果您主要查看追蹤記錄，很容易就會在迷你地圖中遺失確切位置，反之亦然。因此，我們推出了新功能，可將概覽與放大檢視畫面連結。將滑鼠游標懸停在總覽上時，火焰圖會顯示對應的垂直線，標示火焰圖中的同一時間點：
同樣地，現在只要將滑鼠游標懸停在火焰圖表中的項目，就會醒目顯示 CPU 圖表的對應部分。這非常適合用來查看哪些工作會導致 CPU 尖峰。
篩選追蹤記錄
要偵錯效能問題，通常需要篩選大量資料。為協助你專注於最相關的資訊，我們改善了過濾雜訊的功能。
去年，我們推出了將「效能」面板中的指令碼加入 DevTools 忽略清單的功能，可在火焰圖中篩除較不相關的項目。舉例來說，如果您要對網頁中元件的效能進行偵錯，如果架構的呼叫堆疊深度足以讓您上下捲動效能面板，就可能會分散注意力，因此您通常會想收起大部分的呼叫堆疊，以便專注於重要的部分。
您可以按一下火焰圖中的項目，然後選取「Add script to ignore list」，將指令碼新增至 DevTools ignore list，並在火焰圖中收起任何來自該清單的項目。
不過，您現在也可以直接透過「效能」面板頂端的「壓縮」手動編輯忽略清單。忽略清單的規則運算式會在開發人員工具中共用，因此在「來源」面板中偵錯時，系統會略過相符的程式碼，並在火焰圖中將其收合為單一項目，而這份清單會在開發人員工具工作階段中持續存在。
這樣一來，您就能精細控制要忽略哪些檔案，並在工作時輕鬆啟用及停用規則。
調暗第三方指令碼
第三方指令碼在網站上很常見，但通常無法由我們控制，或是與特定偵錯工作階段無關。成效面板頂端的新「check_box」模糊顯示第三方選項會將時間軸上的第三方指令碼和網路活動設為灰色，減少視覺雜訊，讓您能專注於第一方成效貢獻。
但有時您可能需要進一步控管，例如專注於特定第三方，甚至只接受自有 API 或 CDN 的貢獻。在「摘要」分頁的面板底部，您可以看到開發人員工具在網頁中找到的第一方和第三方元件。將滑鼠游標懸停在清單中的每個實體上，系統就會將非該實體的任何活動設為灰色。
結論
這些新功能可協助您更輕鬆地瀏覽「效能」面板，並過濾雜訊，專注於追蹤畫面中對您重要的部分。歡迎試用這些功能，並告訴我們如何進一步改善，或您希望看到哪些其他改善。