Chrome 132 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

運用 Gemini 偵錯網路要求、來源檔案和效能追蹤記錄

除了CSS 樣式，現在您也可以透過 Gemini Chat 討論網路要求、原始檔案和效能追蹤記錄。

如同「元素」面板中的內容選單，如要開啟「AI 協助」面板並開始與 Gemini 對話，請在畫面上按一下滑鼠右鍵，然後選取「Ask AI」，或按一下下列項目旁的 「Ask AI」按鈕：

  • 「網路」面板中的網路要求。
  • 位於「來源」 >「頁面」分頁中的檔案。
  • 位於「效能」 >「主」追蹤中的活動。

網路、來源和效能中的「Ask AI」按鈕和選單選項。

Gemini 會考量所選要求、檔案或活動的背景資訊。

開發人員工具團隊期待收到你在 crbug.com/364805393 中的意見回饋。

AI 即時通訊記錄

你現在可以在「AI 協助」面板中，透過點選面板左上角的「新增」「新聊天」按鈕，或使用「網路」面板的「來源」 >「網頁」分頁，以及「成效」 >「主」追蹤記錄，還原並查看過去與 Gemini 的對話。

如要查看先前的聊天記錄，請在「歷史記錄」 按鈕下方的下拉式選單中選取對應提示。開發人員工具開啟時，「AI 協助」面板會記住您的即時通訊記錄。

「記錄」按鈕下方的下拉式選單中的 AI 即時通訊記錄。

在「應用程式」>「儲存空間」中管理擴充功能儲存空間

如同本機和工作階段儲存空間，您現在可以在「應用程式」 >「儲存空間」部分查看及變更擴充功能儲存空間項目。

在「應用程式」面板中新增「擴充功能儲存空間」部分之前和之後的畫面。

Chromium 問題：crbug.com/40963428。

提升執行效能

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

即時指標中的互動階段

現在您可以在成效即時指標中展開互動，查看各個階段的細目和時間。

在互動中加入階段和時間點細目資料前後的比較。

如這篇文章所述，這些功能的發布代表 Web Vitals 擴充功能的支援已結束。

Chromium 問題：crbug.com/369097528。

「Summary」分頁中的轉譯封鎖資訊

在「成效」 >「網路」追蹤中選取標有紅色三角形的網路要求時，除了 (重構的) 工具提示外，現在「摘要」分頁也會告知您該要求會造成轉譯阻斷。

在「摘要」分頁中新增轉譯阻斷資訊前後的畫面。

支援 scheduler.postTask 事件及其啟動箭頭

「成效」 >「主」追蹤記錄現在會顯示 scheduler.postTask() 事件，以及以下兩者之間的啟動者箭頭：

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

新增 scheduler.postTask 事件和相關啟動箭頭支援功能前後的畫面。

Chromium 問題：crbug.com/40775984。

動畫面板和「元素」>「樣式」分頁的改善項目

這個版本針對「Animations」面板和「Elements」 >「Styles」分頁進行了幾項改善。

「Elements」 >「Styles」分頁現在會在 animation 屬性的值旁邊放置「animation」「Jump to Animations panel」按鈕，方便您在該處輕鬆修改動畫。

在「樣式」分頁中新增連結至「動畫」面板前後的畫面。

「Computed」分頁中的即時更新

在「元素」 >「計算」分頁中，現在可即時更新計算值，例如在動畫更新時。

在 Sensors 中計算壓力模擬

您現在可以使用「Sensors」面板模擬 Nominal、Fair、Serious 和 Critical CPU 壓力。

在「Sensors」面板中新增 CPU 壓力模擬選項前後的畫面。

Chromium 問題：crbug.com/362277525。

記憶體面板中，以來源分組的同名 JS 物件

Memory 面板現在會區分來自不同來源的相同名稱 JS 物件，並相應將其分組。

在前後兩個組別中，同樣以來源為依據來分組相同名稱的 JS 物件。

Chromium 問題：crbug.com/357902505。

全新設定介面

為讓使用者介面設計更一致，開發人員工具的設定現在與 Chrome 設定更為相近。具體來說，現在會以「卡片」形式將各個部分視覺化。

將各個部分分割成「資訊卡」之前和之後的畫面。

效能深入分析面板已淘汰，並從開發人員工具中移除

「效能」面板中所有重要且實用的功能，現在都已移至「效能」面板，具體來說，包括「即時指標」、「洞察」側欄分頁，以及「版面配置變更」追蹤記錄。因此，這個版本會淘汰並移除開發人員工具中的「效能深入分析」面板。

開發人員工具團隊感謝您針對此面板的淘汰和整體效能偵錯體驗，提供寶貴意見。一如往常，我們很樂意聆聽你的想法和看法。歡迎繼續分享！

其他精選內容

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

  • 成效：
    • 移除了搜尋查詢的 3 個字元不必要的限制。
    • 新增 主畫面按鈕，可讓您返回即時指標畫面。
    • 修正先前無法使用的 Shift + S/W 追蹤縮放快速鍵。
  • 「元素」 >「樣式」：
  • 網路：預先載入失敗現已改為黃色警告或紅色錯誤，以表示內容顯示未受影響 372055494。

下載預覽管道

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

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

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

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。