Chrome 132 版 DevTools 的新功能

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

除了 CSS 樣式，現在還能與 Gemini 討論網路要求、來源檔案和效能追蹤記錄。

與「元素」面板中的內容選單類似，如要開啟「AI 輔助」面板並開始與 Gemini 對話，請在下列項目旁按一下滑鼠右鍵並選取「詢問 AI」，或點選 「詢問 AI」按鈕：

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

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

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

AI 對話記錄

現在只要點選「AI 輔助」面板左上角的「新增對話」按鈕，或使用「網路」面板、「來源」 >「網頁」分頁和「效能」 >「主要」軌的「詢問 AI」按鈕和選單選項，即可還原及查看與 Gemini 的過往對話。

如要查看先前的對話，請選取「記錄」按鈕下方的下拉式選單中對應的提示。開發人員工具開啟時，「AI 輔助」面板會記住您的對話記錄。

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

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

Chromium 問題：crbug.com/40963428。

提升執行效能

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

即時指標中的互動階段

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

如「Web Vitals 擴充功能現已整合至開發人員工具」一文所述，這些功能發布後，我們將停止支援 Web Vitals 擴充功能。

Chromium 問題：crbug.com/369097528。

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

在「效能」 >「網路」軌中選取標有紅色三角形的網路要求時，「摘要」分頁除了會顯示 (重構) 提示，現在也會指出要求會阻斷算繪。

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

「成效」>「主要」軌跡現在會顯示 scheduler.postTask() 事件，以及下列發起者箭頭：

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

Chromium 問題：crbug.com/40775984。

「動畫」面板和「元素」>「樣式」分頁的改良功能

這個版本對「動畫」面板和「元素」 >「樣式」分頁進行了幾項改良。

從「元素」>「樣式」跳到「動畫」

「元素」>「樣式」分頁現在會在 animation 屬性的值旁邊，顯示「跳至動畫面板」圖示，方便您檢查動畫。

「已計算」分頁中的即時更新

現在，當動畫更新計算值時，「元素」>「已計算」分頁會即時更新計算值。

在「感應器」中模擬壓力

「感應器」面板現在可讓您模擬 Nominal、Fair、Serious 和 Critical CPU 壓力。

Chromium 問題：crbug.com/362277525。

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

「記憶體」面板現在會區分來自不同來源的同名 JS 物件，並將其分組。

Chromium 問題：crbug.com/357902505。

全新設定介面

為進一步配合使用者介面設計，開發人員工具設定現在與 Chrome 設定更為相似。具體來說，各部分現在會以「資訊卡」的形式呈現。

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

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

開發人員工具團隊非常感謝您提供的意見，協助我們瞭解您對這個面板淘汰作業和整體效能偵錯體驗的想法。我們一向很重視您的想法和觀點，歡迎分享更詳細的資訊！

其他重點

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

• 成效：
  • 移除搜尋查詢不必要的 3 個字元限制。
  • 新增「首頁」按鈕，可返回即時指標畫面。
  • 修正先前失效的 Shift+S/W 追蹤縮放快速鍵。
• 「元素」 >「樣式」：
  • 在自動完成 341991541 中新增 anchor-center。
  • 修正錯誤：無法為 2 字值使用彈性方塊編輯器 341964645。
• 網路：預先擷取失敗現在會顯示黃色警告，而非紅色錯誤，表示內容顯示不受影響 372055494。

下載預覽版頻道

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

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

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

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

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