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。

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

在「Performance」 >「Network」軌中選取標有紅色三角形的網路要求時，除了 (重構) 提示方塊外，「Summary」分頁現在也會顯示要求會阻斷算繪。

支援 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。
  • 修正 flexbox 編輯器無法處理 2 字值的問題 341964645。
• 網路：預先擷取失敗現在會顯示黃色警告，而非紅色錯誤，表示內容顯示不受影響 372055494。

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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