在 Chrome 144 中，團隊在 Chrome 開發人員工具 MCP 伺服器中，推出備受期待的新功能「要求條件」面板，並改善字型和採用樣式表的偵錯功能。
以上就是我們在 2025 年推出的所有重大功能。想查看是否錯過任何一項嗎？接著請參閱以下重點，或瀏覽過往的「開發人員工具新功能」版本。
開發人員工具 MCP 伺服器更新
我們修正了 DevTools MCP 伺服器的各種問題，並發布 v0.12.1。這個版本推出一項重要新功能「自動連線」，可讓您重複使用現有的瀏覽器工作階段。透過自動連線功能，您可以在 Chrome 中自行開始偵錯，然後將開發人員工具 MCP 指向同一個 Chrome 執行個體，繼續先前的工作。
如要進一步瞭解開發人員工具 MCP 的自動連線功能，請參閱相關網誌文章。 如需完整的變更和錯誤修正清單，請參閱 GitHub 上的公開異動記錄。
個別網路要求節流
「網路要求封鎖」面板已重新命名為「要求條件」。 除了封鎖要求，這個面板現在也支援節流個別要求。
依序點選 ⋮ >「更多工具」 >「要求條件」，開啟面板。勾選「啟用封鎖和節流功能」核取方塊，即可啟用要求封鎖功能。按一下「+」按鈕，即可新增文字模式。按一下 圖示，捨棄所有規則。
如要瞭解如何節流個別網路要求，請參閱新版說明文件。
編輯 @font-face 和 @font-feature-values 規則
@font-face 和 @font-feature-values 現在會顯示在「樣式」面板中，並可從該處編輯。
「元素」面板中的採用樣式表
「元素」面板現在會顯示陰影根和文件根下的採用樣式表。這樣一來，使用建構樣式表的開發人員就能更輕鬆地找出影響元素的樣式表，並偵錯樣式，特別是在樣式未如預期套用時。
2025 年開發人員工具的新功能
AI 創新功能
從「控制台深入分析」開始，AI 創新技術現已成為 Chrome 開發人員工具不可或缺的一部分，而「AI 輔助功能」面板則是提供情境感知 AI 輔助偵錯的主要中心。透過「控制台」和「來源」面板中的程式碼建議，以及「效能」追蹤記錄中 Gemini 的自動註解，您可以使用 DevTools 提供的全方位 AI 輔助工具，簡化工作流程。
- 端對端樣式修正：要求 Gemini 修正 CSS 問題，並搭配工作區，直接將變更儲存回磁碟上的來源檔案。
- 詢問效能：現在可以與 AI 輔助功能討論完整的效能追蹤記錄，深入瞭解任何效能洞察，或使用 Gemini 為追蹤記錄加上註解。
- 視覺化偵錯：AI 輔助面板現在支援多模態，可上傳圖片或擷取螢幕截圖，協助 Gemini 瞭解並修正視覺錯誤。
成效
我們重新設計了「效能」面板，讓效能偵錯工作不再令人望而生畏，並提供更多可執行的動作。舉例來說，現在錄製的追蹤記錄會提供精選洞察資料，協助您更快找出瓶頸並瀏覽追蹤記錄。其他改善項目包括：
- 可做為行動依據的洞察：我們推出了一系列強大的成效洞察，可找出特定問題，例如階段性 LCP、版面配置位移原因和文件要求延遲。
- 實際環境：我們將現場資料和 CrUX 資料直接整合到「效能」面板，方便您根據實際使用者體驗驗證實驗室結果。
- 架構背景資訊： Angular v20 和 React v19.2 現在都使用 Extensibility API。直接查看元件樹狀結構，即可輕鬆瞭解主執行緒瓶頸。感謝 Angular 和 React 團隊與我們合作！
- 提升協作效率：現在可以為追蹤記錄加上註解，並匯出資源內容和來源對應，方便與同事分享追蹤記錄，確保同事或日後的自己掌握所有必要資訊。
網頁平台
開發人員工具與時俱進，不僅為最新的 CSS 規格新增專用工具，也改善了現有功能，提升開發人員體驗。
我們新增了複雜 CSS 變數鏈結的深入追蹤功能、屬性工具提示的基準可用性，以及最近推出的複雜進入動畫偵錯支援功能，可使用 @starting-style 規則和新 display: masonry 版面配置的視覺化編輯器。
下載預覽版頻道
建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！
與 Chrome 開發人員工具團隊聯絡
如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。
- 如要提供意見或要求新功能，請前往 crbug.com。
- 如要回報開發人員工具的問題，請依序點選開發人員工具中的 「更多選項」 >「說明」 >「回報開發人員工具的問題」。
- 在 Twitter 訊息中標記 @ChromeDevTools。
- 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。