给AI助手装上真实浏览器：Chrome DevTools MCP 浏览器自动化与性能分析接入手册-港品优选

给AI助手装上真实浏览器：Chrome DevTools MCP 浏览器自动化与性能分析接入手册

【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp

AI写完了代码，谁来替它打开浏览器验证？助手吐出一串DOM操作，页面是否正常渲染、控制台有没有报错，它自己确认不了。Chrome DevTools MCP 是一个基于 MCP 协议的服务器，构建在 Puppeteer + Chrome DevTools 之上，让 Gemini、Claude、Cursor、Copilot 这类 AI 编程助手能够控制并检查一个真实的 Chrome 实例。

5 分钟跑起来

在客户端的 MCP 服务器配置里粘贴以下最小配置：

{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }

重启客户端，让 AI“检查 https://developers.chrome.com 的性能”，能返回追踪结果即接入成功。

它到底能替你干什么

17 个工具，三类：

分类	工具数	代表工具	解决什么问题
输入自动化	8	`click`、`fill`、`press_key`、`upload_file`	点击、表单填写、按键、文件上传
导航自动化	6	`navigate_page`、`new_page`、`wait_for`	跳转、开新页、等待条件
性能分析	3	`performance_start_trace`、`performance_stop_trace`、`performance_analyze_insight`	抓性能追踪、提取洞察

各工具的参数细节见工具参考。性能追踪可随时停止，performance_analyze_insight直接给结论而非原始数据；网络请求与控制台消息用list_network_requests、get_console_message逐条查看；操作经wait_for等结果出现，脚本不抢跑。

10+ 客户端兼容清单

客户端	客户端
Gemini CLI	Gemini Code Assist
Claude Code	Antigravity
Cursor	Copilot
VS Code	Visual Studio
Warp	Windsurf

进阶连接：指定浏览器与通道

不想让它新起一个浏览器时，用以下参数连接运行中的 Chrome 或改变启动方式，完整说明见 CLI 文档：

参数	用途
`--browserUrl`	连接运行中的 Chrome，如`http://127.0.0.1:9222`
`--wsEndpoint`	经 WebSocket 端点连接，与上项二选一
`--headless`	无头模式，不弹 UI 窗口
`--channel`	切换 Chrome 通道
`--logFile`	交互日志写文件，便于排查

通道四选一：stable（默认）、canary、beta、dev。

安全边界：接入后浏览器实例内的内容对 MCP 客户端可见，别在其中登录或处理不愿共享给客户端的敏感数据；远程调试端口打开期间（连接运行中 Chrome 的前提），该实例中不要浏览敏感网站。

两个实战示例

性能体检：把“检查 https://developers.chrome.com 的性能”复制发给 AI，它会自动完成追踪开始、停止与洞察分析，返回结论。

自动化调试：流程不稳时，在 args 里追加--logFile记录交互日志，打开DEBUG=*环境变量出详细日志，配合故障排查文档定位卡在哪一步。

接入链路很短：npx 拉起来、JSON 挂上去、17 个工具覆盖输入、导航与性能。下一步：把上面的配置块粘进客户端的 MCP 设置，先跑一遍那条性能检查。

【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析