Chrome DevTools MCP：AI 助手如何控制本地浏览器
Chrome DevTools MCP 是由 Chrome DevTools 团队官方出品的工具，旨在为 AI 编码助手（如 Gemini、Claude、Copilot 等）提供直接控制和检查本地 Chrome 浏览器的能力。通过 Model-Context-Protocol (MCP)，AI 助手不再局限于文本交互，而是能够执行实际的浏览器操作。
功能特性
- 实时分析性能：自动录制性能轨迹（Traces），识别性能瓶颈。
- 高级自动化调试：分析网络请求、截图、检查浏览器控制台错误。
- 可靠的自动化操作：基于 Puppeteer，支持点击、填写表单、页面跳转等操作。
部署前提
- Node.js：版本 >= v20.19
- Chrome 浏览器：使用最新稳定版
核心部署
chrome-devtools-mcp 本质上是一个 MCP 服务器。启动命令如下：
npx -y chrome-devtools-mcp@latest
配置指南
根据使用的 AI 助手客户端不同，配置方式略有差异。
1. Cursor
- 打开 Cursor 设置 (Settings)。
- 找到
MCP->New MCP Server。 - 填入以下 JSON 配置：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
2. Gemini CLI (命令行)
全局添加：
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest
为当前项目添加：
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
