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

