Chrome 133 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

永久保留 AI 對話記錄

AI 輔助面板現在會在工作階段之間保留本機的對話記錄，因此即使重新載入開發人員工具或 Chrome，您還是可以查看先前的 Gemini 對話。

效能面板改善

這個版本對「效能」面板進行了多項改良。

圖片傳送深入分析

「成效」 >「洞察」分頁現在會醒目顯示可最佳化檔案大小的圖片。按一下洞察資料中的圖片，即可在「網路」軌中查看醒目顯示的圖片。

「成效」面板，醒目顯示的是圖片放送洞察資料。

如要進一步瞭解如何最佳化圖片傳送作業，請參閱「有效率地對圖片進行編碼」。

傳統和現代鍵盤導覽

「效能」面板現在可讓您選擇偏好的鍵盤導覽樣式，主要差異如下：

  • 傳統：使用滑鼠滾輪 (觸控板向上或向下) 縮放，並按住 Shift 鍵並滾動滑鼠滾輪，即可垂直捲動。
  • 新版：使用滑鼠滾輪垂直捲動、按住 Shift 鍵並使用滑鼠滾輪水平捲動，以及按住 Command/Control 鍵並使用滑鼠滾輪縮放。

如要選擇偏好的樣式，請按一下面板右上角的「說明」顯示快速鍵，然後選取「傳統」或「現代」。快速鍵對話方塊也會提供可用快速鍵的速查表。

顯示「效能」面板可用快速鍵的快速鍵對話方塊。

忽略火焰圖中不相關的指令碼

如要更專注於程式碼，現在可以直接在「效能」面板中，將不相關的指令碼加入忽略清單。面板會自動摺疊過多的巢狀結構。

如要將指令碼新增至忽略清單，請依序點選頂端動作列中的「壓縮」「顯示忽略清單設定對話方塊」，然後在輸入欄位中輸入規則運算式。火焰圖會在你輸入時套用新規則。

您在「設定」設定 >「忽略清單」中新增的忽略清單規則會儲存在開發人員工具中，您可以在對話方塊中隨意開啟及關閉這些規則。

懸停時顯示時間軸標記和範圍醒目顯示

為協助您進一步瞭解效能追蹤記錄，效能面板現在會執行下列操作：

  • 將游標懸停在「時間軸」上時，會顯示涵蓋整個效能追蹤記錄的垂直標記。
  • 將游標懸停在「主要」軌中的項目上時，系統會醒目顯示「時間軸」中的範圍。

建議的節流設定

「成效」面板現在會在即時指標和相關的「擷取設定」下拉式選單中，建議節流設定。

新增節流建議前後的設定選單。

目前建議的 CPU 節流是使用最頻繁的 4x slowdown，而網路建議則是以 Chrome 使用者體驗報告資料為依據 (如果已在即時指標中啟用)。

此外，在動作列的「Recent sessions」下拉式選單中，「Performance」面板現在會顯示您使用的節流設定，並列出每項追蹤記錄。

疊加層中的時間標記

時間標記已從「時間」軌移至追蹤記錄底部，現在會疊加在所有軌上，即使時間 軌已隱藏，仍會顯示時間標記。

將標記移至追蹤記錄底部前後的畫面。

時間軸軌會保留自訂 mark() 和 measure() 呼叫。

摘要中的 JavaScript 呼叫堆疊追蹤

「效能」 >「摘要」分頁現在會顯示 JavaScript 呼叫的堆疊追蹤記錄，包括非同步呼叫。

在「摘要」分頁中新增堆疊追蹤記錄前後的畫面。

徽章設定已移至「元素」選單

「元素」面板中的徽章設定已從預設隱藏的動作列，移至對應的右鍵選單。

將徽章設定移至選單前後的畫面。

全新「最新消息」面板

「最新資訊」面板採用更貼近 Chrome 設計的全新外觀。

「最新消息」面板的新舊版外觀。

Chromium 問題：325441858。

Lighthouse 12.3.0

「Lighthouse」面板現在會執行 Lighthouse 12.3.0。

這項更新新增了多項稽核，可檢查是否使用 COOP 進行適當的來源隔離，以及是否採用嚴格的 HSTS 政策。如需完整變更清單，請參閱這篇文章。

如要瞭解如何使用開發人員工具中的 Lighthouse 面板，請參閱「Lighthouse：提升網站速度」。

Chromium 問題：40543651。

其他重點

這個版本的重要修正和改良項目包括：

  • 來源：暫停時，如果 Debugger 是在暫停後建立，現在不會意外切換至 Service Worker 環境 (373893057)。
  • 成效：
    • 現在將游標懸停在指令碼上時，火焰圖中的工具提示會顯示網址 (如有) (368541957)。
    • 摘要：圓餅圖會改以長條圖呈現。
    • 「擷取設定」中的「擴充資料」核取方塊已重新命名為「顯示自訂軌」。
    • 「洞察」分頁現在有「通過的洞察 (N)」部分，預設為收合狀態。
  • 「應用程式」 >「儲存空間」：您可以建立金鑰為空的儲存空間項目，因為這在技術上是有效的 (373703285)。
  • chrome:// 頁面 (40186276) 現在已停用裝置模式。
  • 網路：
    • 開啟對應設定後，按一下「匯出 HAR」，系統會開啟含有兩個選項的選單 (已清除和含私密資料)。先前，選單是透過長按開啟 (378076279)。
    • 「複製為 cURL」現在使用 -b 屬性略過 Cookie，並提高可讀性，而非 -H 'cookie:...' (40791742)。
  • 無障礙：現在可以使用內容選單 (383164782)，在面板內向左或向右移動分頁。
  • 封鎖網路要求：這個指令選單設定現在會與對應的核取方塊 (378058733) 同步。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。