谷歌 AI 推出 Chrome DevTools MCP 公測版:賦能編碼代理控制實時瀏覽器

谷歌最近發佈了 “Chrome DevTools MCP” 的公測版，這是一種模型上下文協議（MCP）服務器，能夠讓 AI 編碼代理控制和檢查真實的 Chrome 瀏覽器實例。該工具可以記錄性能數據、檢查 DOM 和 CSS、執行 JavaScript、讀取控制檯輸出以及自動化用戶流程。

這一發布直擊代碼生成代理的一個普遍侷限性:它們通常無法觀察所創建或修改頁面的運行時行爲。通過將代理與 Chrome 的 DevTools 連接，谷歌將靜態建議引擎轉變爲能夠在瀏覽器中運行測量並提出修復建議的閉環調試器。

Chrome DevTools MCP 究竟是什麼?  

MCP 是一種連接大型語言模型（LLM）與工具和數據的開放協議。谷歌的 DevTools MCP 作爲一個專門的服務器，向兼容 MCP 的客戶端開放 Chrome 的調試界面。谷歌開發者博客將其描述爲 “將 Chrome DevTools 的強大功能帶給 AI 編碼助手”，並提供瞭如啓動性能跟蹤(例如 performance_start_trace)並讓代理分析結果以提出優化建議(例如診斷高最大內容繪製)等具體工作流。

功能與工具  

官方的 GitHub 倉庫列出了廣泛的工具集。除了性能跟蹤，代理還可以運行導航原語（如 navigate_page、new_page、wait_for）、模擬用戶輸入(如 click、fill、drag、hover)，以及檢查運行時狀態(如 list_console_messages、evaluate_script、list_network_requests、get_network_request)。截圖和快照工具提供了可視化和 DOM 狀態捕捉，支持差異比較和迴歸測試。該服務器在底層使用 Puppeteer 實現可靠的自動化和等待語義，並通過 Chrome DevTools 協議(CDP)與 Chrome 進行通信。

安裝過程  

MCP 客戶端的設置非常簡單。谷歌建議只需添加一個配置段，通過 npx 跟蹤最新的服務器構建:

json

{

  "mcpServers": {

    "chrome-devtools": {

      "command": "npx"，

      "args": ["chrome-devtools-mcp@latest"]

    }

  }

}

該服務器與多個代理前端集成:如 Gemini CLI、Claude Code、Cursor 以及 GitHub Copilot 的 MCP 支持。對於 VS Code/Copilot，倉庫提供了一個 code --add-mcp 的一行命令;對於 Claude Code，則通過 claude mcp add 命令進行相同的 npx 目標調用。該包的目標是 Node.js ≥22和當前版本的 Chrome。

示例代理工作流  

谷歌的公告突出了顯示端到端循環的實用提示:在實時瀏覽器中驗證建議的修復、分析網絡故障（如 CORS 或被阻止的圖像請求）、模擬用戶行爲如表單提交以重現錯誤、通過讀取 DOM/CSS 上下文檢查佈局問題，以及運行自動化性能審覈以減少最大內容繪製等。這些都是代理現在可以通過實際測量而非啓發式驗證的操作。

github：https://github.com/ChromeDevTools/chrome-devtools-mcp

劃重點:  

🌟 ** 實時控制 **:谷歌的 Chrome DevTools MCP 允許 AI 代理控制和檢查真實的 Chrome 瀏覽器。  

⚙️ ** 廣泛功能 **:支持性能跟蹤、用戶輸入模擬及運行時狀態檢查等多種功能。  

🚀 ** 簡便安裝 **:用戶只需簡單配置，即可快速部署 MCP 服務器並集成至多種開發工具中。