Chrome 141 版開發人員工具的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

AI 代理程式適用的 Chrome 開發人員工具 (MCP)

您現在可以預覽新版 Chrome 開發人員工具 Model Context Protocol (MCP) 伺服器。讓 AI 程式設計輔助工具也能使用 Chrome 開發人員工具的強大功能。

過去，程式碼代理程式無法在瀏覽器中執行程式碼，因此無法瞭解程式碼的實際用途。Chrome 開發人員工具 MCP 伺服器會變更這項設定。AI 程式碼輔助工具可以直接在 Chrome 中偵錯網頁，並運用開發人員工具的偵錯功能和效能洞察資料。這有助於提升他們識別及修正問題的準確度。

請參閱下列說明：

詳情請參閱「AI 代理程式適用的 Chrome 開發人員工具 (MCP)」。

使用 Gemini 偵錯網路依附元件樹狀結構

「成效」>「洞察」>「網路依附樹狀結構」洞察資料現在有「使用 AI 偵錯」按鈕，可帶您前往「AI 輔助」面板，在 Gemini 的協助下討論及偵錯該樹狀結構。

在「網路依附元件樹狀結構」洞察資訊中新增「使用 AI 偵錯」按鈕前後的畫面。

匯出與 Gemini 的對話

現在只要點選頂端動作列的「匯出對話」按鈕，或對話中 Gemini 訊息下方的「複製回覆」，即可匯出與 Gemini 的對話或將回覆複製到剪貼簿。

在 AI 輔助功能中新增匯出和複製按鈕前後的畫面。

「效能」面板中保留的軌跡設定

在「Performance」面板中設定錄製的軌跡時，開發人員工具現在會儲存設定，並在您匯入或錄製新軌跡時套用設定。

篩選受 IP 保護的網路要求

在「網路」面板中，您現在可以篩選傳送至 IP 保護 Proxy 的要求。

在「網路」面板中新增「受 IP 保護的要求」篩選器前後的畫面。

「元素」>「版面配置」分頁新增了格狀版面配置支援

您現在可以在「元素」 >「樣式」分頁中檢查格狀版面配置。

砌磚格線配置是一種配置方法，其中一個軸使用典型的嚴格格線配置 (通常是欄)，另一個軸則使用砌磚格線配置。

在「元素 - 版面配置」中新增格狀版面配置支援前後的畫面。

Lighthouse 12.8.2

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

最值得一提的是，Lighthouse 會將 CSS 自訂屬性的問題分成不同的錯誤訊息。

另請參閱完整異動清單。

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

Chromium 問題：40543651。

其他亮點

這個版本包含多項重大修正和改良，以下列舉幾項：

  • 效能：Request Idle 回呼事件現在包含 timeout 屬性 (crbug.com/441679219)。
  • 無障礙功能。螢幕閱讀器現在會朗讀下列內容：
  • 網路：在網路記錄項目上按一下滑鼠右鍵即可選取該項目 (crbug.com/368510578)。

下載預覽版頻道

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

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

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

開發人員工具新功能

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