發布日期：2025 年 9 月 23 日
我們今天推出新版 Chrome 開發人員工具模型內容通訊協定 (MCP) 伺服器的公開預先發布版，將 Chrome 開發人員工具的強大功能帶入 AI 程式碼輔助工具。
程式碼代理程式面臨一個基本問題：無法在瀏覽器中執行程式碼時，查看程式碼實際執行的動作。他們就像是蒙上眼睛編寫程式。
Chrome 開發人員工具 MCP 伺服器會變更這項設定。AI 程式碼輔助工具可以直接在 Chrome 中偵錯網頁，並運用開發人員工具的偵錯功能和效能洞察資料。這有助於提升問題識別和修正的準確度。
請親自瞭解運作方式：
什麼是 Model Context Protocol (MCP)？
Model Context Protocol (MCP) 是一項開放原始碼標準，可將大型語言模型 (LLM) 連結至外部工具和資料來源。Chrome 開發人員工具 MCP 伺服器可為 AI 代理程式新增偵錯功能。
舉例來說，Chrome 開發人員工具 MCP 伺服器提供名為 performance_start_trace 的工具。如果需要調查網站效能，LLM 可以使用這項工具啟動 Chrome、開啟網站，並使用 Chrome 開發人員工具記錄效能追蹤記錄。LLM 接著會分析效能追蹤記錄，並建議可能的改善方式。Chrome 開發人員工具 MCP 伺服器可透過 MCP 協定，為您的程式碼編寫代理程式提供新的偵錯功能，協助您建構更優質的網站。
如要進一步瞭解 MCP 的運作方式，請參閱 MCP 說明文件。
用途
以下是幾個範例提示，您可以在所選的 AI 助理 (例如 Gemini CLI) 中試試看。
即時驗證程式碼變更
使用 AI 代理程式生成修正內容，然後透過 Chrome 開發人員工具 MCP 自動驗證解決方案是否正常運作。
建議提示詞：
Verify in the browser that your change works as expected.
診斷網路和主機錯誤
授權給服務專員，讓他們分析網路要求，找出 CORS 問題，或檢查控制台記錄，瞭解功能無法正常運作的原因。
建議提示詞：
A few images on localhost:8080 are not loading. What's happening?
模擬使用者行為
瀏覽、填寫表單及點選按鈕，重現錯誤並測試複雜的使用者流程，同時檢查執行階段環境。
建議提示詞：
Why does submitting the form fail after entering an email address?
偵錯即時樣式和版面配置問題
要求 AI 代理程式連線至即時網頁、檢查 DOM 和 CSS，並根據瀏覽器的即時資料，提供具體建議來修正複雜的版面配置問題，例如溢位元素。
建議提示詞：
The page on localhost:8080 looks strange and off. Check what's happening there.
自動執行成效稽核
指示 AI 代理程式執行效能追蹤、分析結果，並調查特定效能問題，例如 LCP 數值偏高。
建議提示詞：
Localhost:8080 is loading slowly. Make it load faster.
如要查看所有可用工具的清單，請參閱工具參考說明文件。
開始使用
如要試用這項功能，請將下列設定項目新增至 MCP 用戶端：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
如要檢查是否正常運作，請在程式碼代理程式中執行下列提示：
Please check the LCP of web.dev.
詳情請參閱 GitHub 上的 Chrome 開發人員工具 MCP 文件。
親身參與
我們將逐步建構 Chrome 開發人員工具 MCP，今天發布的公開搶先版就是第一步。我們正積極向您和社群徵求意見回饋，瞭解接下來應新增哪些功能。無論您是使用 AI 程式碼輔助工具的開發人員，還是建構新一代 AI 開發工具的供應商，您的洞察資訊都非常寶貴。如果發現有缺漏或無法正常運作的部分，請在 GitHub 上提出問題。