Chrome 133 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

永久 AI 即時通訊記錄

「AI 輔助」面板現在會在本機上保留各個工作階段的即時通訊記錄，因此即使重新載入開發人員工具或 Chrome，您仍可查看先前與 Gemini 的對話。

效能面板改善

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

圖片提交深入分析

「Performance」 >「Insights」分頁現在可醒目顯示可改善檔案大小的圖片。按一下洞察中的圖片，即可在「網路」追蹤圖表中看到醒目顯示的圖片。

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

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

傳統和現代的鍵盤導覽

您現在可以透過「Performance」面板選擇偏好的鍵盤導覽樣式，主要差異如下：

  • 傳統：使用滑鼠滾輪 (向上或向下滑動觸控板) 縮放，並搭配 Shift + 滑鼠滾輪進行垂直捲動。
  • 現代：使用滑鼠滾輪進行垂直捲動，使用 Shift + 滑鼠滾輪進行水平捲動，以及使用 Command/Control + 滑鼠滾輪進行縮放。

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

捷徑對話方塊，顯示「效能」面板的可用捷徑。

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

為更專注於程式碼，您現在可以在「Performance」面板中，將不相關的腳本加入忽略清單。面板會自動收合過度巢狀結構。

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

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

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

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

  • 當您將滑鼠游標懸停在「時間軸」上時，系統會顯示橫跨整個效能追蹤記錄的垂直標記。
  • 當您將滑鼠游標懸停在「Main」軌道中的項目上時，會在「Timeline」中醒目顯示該項目的範圍。

建議的節流設定

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

在設定選單中加入節流建議前後的畫面。

目前建議的 CPU 節流為最常用的 4x slowdown，網路建議則是根據 Chrome UX 報告資料 (如果在即時指標中已開啟) 提供。

此外，效能面板現在會在「最近的工作階段」下拉式選單中，提醒您在每個追蹤記錄旁邊顯示所使用的節流設定。

疊加層中的時間標記

時間標記已從「Timings」軌道移至追蹤記錄的底部，現在會疊加在所有軌道的頂端，即使「Timings」軌道隱藏也能看到。

移動標記至追蹤記錄底部前後。

Timings 追蹤會保留自訂 mark() 和 measure() 呼叫。

摘要中 JavaScript 呼叫的堆疊追蹤

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

在「摘要」分頁中新增堆疊追蹤記錄之前和之後。

徽章設定已移至 Elements 的選單

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

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

新的「最新消息」面板

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

「最新資訊」面板的舊版和新版外觀。

Chromium 問題：325441858。

Lighthouse 12.3.0

Lighthouse 面板現在執行 Lighthouse 12.3.0 版。

這次更新除了其他內容外，還新增了可檢查是否使用 COOP 和嚴格的 HTTP 嚴格傳輸安全性政策，確保正確的來源隔離功能。請參閱完整變更清單。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：40543651。

其他精選內容

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

  • 來源：現在如果在暫停後建立服務工作者，偵錯工具就不會在暫停時意外切換至服務工作者背景 (373893057)。
  • 成效：
    • 當滑鼠游標懸停在指令碼上時，火焰圖中的工具提示現在會顯示網址 (如果有的話) (368541957)。
    • 摘要：圓餅圖已改為以長條圖呈現。
    • 擷取設定中的「Extension data」核取方塊已改名為「Show custom tracks」。
    • 「洞察」分頁現在會顯示「已通過的洞察資料 (N)」部分，預設會收起。
  • 應用程式 > 儲存空間：您可以使用空白鍵建立儲存空間項目，因為在技術上是有效的 (373703285)。
  • chrome:// 頁面現已停用裝置模式 (40186276)。
  • 網路：
    • 在啟用相應設定後，點選「匯出 HAR」，即可開啟選單，其中包含兩個選項 (經過處理和含有私密資料)。先前，只要長按即可開啟選單 (378076279)。
    • 「Copy as cURL」現在使用 -b 屬性來略過 Cookie，並提高可讀性，而非使用 -H 'cookie:...' (40791742)。
  • 無障礙設計：現在可以透過內容選單 (383164782) 將面板中的分頁向左或向右移動。
  • 網路要求封鎖：這個指令選單設定現在會與對應的核取方塊同步 (378058733)。

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。