Chrome 137 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

2025 年 Google I/O 大會版

今年的 Google I/O 大會將有許多 Chrome 開發人員工具相關內容。活動將包含現場直播和錄製的課程。

如要瞭解令人期待的新功能，請觀看以下內容：

此外，別忘了在太平洋時間 2025 年 5 月 20 日下午 4:30，觀看 Rachel Andrew 的網路最新消息研討會。

如要快速瞭解最新重點，請觀看最新影片：

使用 Gemini 修改及儲存工作區的 CSS 變更

現在只要按幾下滑鼠，Gemini 就能為你修改及修正 CSS，而且只要連結工作區資料夾，就能將變更儲存回電腦上的來源檔案。

自動工作區是實驗功能，你可以連結現有的來源資料夾，也可以試用示範。

連結工作區資料夾後，在「元素」面板中，按一下「詢問 AI」，要求 Gemini 修改 CSS，然後按一下「繼續」，即時測試變更，接著展開「未儲存的變更」，按一下「套用至工作區」，查看差異，然後按一下「全部儲存」。

連結工作區資料夾，並將變更儲存回來源檔案

您現在可以自動 (或手動) 連結工作區資料夾，讓開發人員工具將 JavaScript、HTML 和 CSS 變更儲存回電腦上儲存的來源檔案。

瞭解 JavaScript 的運作方式：

Chromium 問題：404170628。

詢問 Gemini 關於成效洞察的資訊

現在只要按一下按鈕，即可與 Gemini 對話，進一步瞭解下列成效洞察資料並採取行動：

  • 依階段顯示 LCP
  • LCP 要求探索
  • 轉譯封鎖要求
  • 版面配置位移主因
  • 文件要求延遲

在「成效」面板的洞察資訊中新增「詢問 AI」按鈕前後的畫面。

歡迎在 crbug.com/371170842 提供這項功能的意見回饋。

使用 Gemini 註解成效發現

現在可以要求 Gemini 生成效能追蹤記錄中事件的註解。

在「主要」軌中按兩下事件，然後點選輸入欄位旁的「產生標籤」。Gemini 會根據堆疊追蹤和脈絡建議標籤。

在 Gemini 對話中新增螢幕截圖

在「AI 輔助」面板中，現在可以按一下「photo_camera」「擷取螢幕截圖」按鈕，擷取網頁螢幕截圖並提交給 Gemini 對話。

你可以使用螢幕截圖為提示提供額外的視覺背景資訊，例如檢查所有可見按鈕是否間距相同。

在「AI 輔助」面板中新增「擷取螢幕截圖」按鈕前後的畫面。

「效能」面板中的新洞察資料

這個版本在「效能」面板中新增了兩種洞察：重複的 JavaScript 和舊版 JavaScript。

重複的 JavaScript

如果網頁上有重複的 JavaScript 模組，新的「成效」 >「洞察」 >「重複的 JavaScript」會在「網路」軌中，醒目顯示這些模組的要求。

「效能」面板中的「重複的 JavaScript」深入分析。

您也可以按一下洞察資訊中的「查看樹狀圖」，探索 JavaScript 依附元件。

舊版 JavaScript

如果網頁上有舊版 JavaScript (例如可讓舊版瀏覽器使用新版 JavaScript 功能的 Polyfill 和轉換作業)，新的「成效」 >「洞察」 >「舊版 JavaScript」會醒目顯示「網路」軌跡中對舊版 JavaScript 的要求。不過這些功能對於新式瀏覽器而言，有很多都是不必要的。

「效能」面板中的「舊版 JavaScript」深入分析。

推測現在支援規則標記

如果規則集有標記，現在「應用程式」 >「推測載入」會顯示標記，而非網址。

替換規則集網址前後的標記。

Chromium 問題：393408589。

Lighthouse 12.6.0

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

最值得一提的是，Lighthouse 將改用成效洞察稽核。在 Lighthouse 報表的「效能」類別中，您現在可以「試用洞察」。

在 Lighthouse 報表中新增切換至洞察的選項前後。

另請參閱完整異動清單。

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

Chromium 問題：40543651。

其他重點

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

  • 網路：新增伺服器時間的已知格式剖析功能。
  • 現在只要按住 Cmd/Ctrl 鍵並點選資料列，即可取消選取表格中的資料列 (Chromium 問題：409474445)。
  • 「成效」 >「洞察」 >「使用有效率的快取生命週期」現在會忽略 TTL 等於或超過 30 天的資產。

無障礙設定

這個版本帶來下列無障礙功能改善項目：

  • 效能：追蹤記錄中的啟動器箭頭現在更顯眼。
  • 元素：您現在可以使用 A 快速鍵切換全頁無障礙樹狀檢視畫面 (Chromium 問題：40888478)。

  • 螢幕閱讀器現在會朗讀以下內容：

    • 從程式碼區塊複製內容時，系統會顯示「已複製到剪貼簿」。
    • 在 AI 輔助對話中將變更套用至工作區時，系統會顯示「套用至工作區」。
    • 在「成效」>「註解」中要求 AI 生成標籤時，系統會顯示「正在生成標籤」。
    • 請注意，AI 輔助即時通訊中會顯示建議提示。
    • 在「成效」 >「洞察」中，朗讀相關洞察資料的預估節省金額。

下載預覽版頻道

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

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

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

開發人員工具新功能

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