Chrome DevTools MCP - AI编程助手的浏览器控制工具

项目概述

Chrome DevTools MCP 是一个官方的 Model Context Protocol (MCP) 服务器，它让 AI 编程助手（如 Gemini、Claude、Cursor 或 Copilot）能够控制和检查实时运行的 Chrome 浏览器。该工具为 AI 编码助手提供了 Chrome DevTools 的全部功能，用于可靠的自动化、深度调试和性能分析。

GitHub 地址: https://github.com/ChromeDevTools/chrome-devtools-mcp

核心特性

1. 性能洞察

• 使用 Chrome DevTools 记录性能追踪
• 提取可操作的性能优化建议
• 帮助 AI 助手识别性能瓶颈

2. 高级浏览器调试

• 分析网络请求
• 捕获屏幕截图
• 检查浏览器控制台输出
• 检测 CORS 问题和控制台错误

3. 可靠的自动化

• 基于 Puppeteer 实现浏览器自动化
• 自动等待操作结果
• 支持表单填充、页面导航、元素交互

主要功能分类

Chrome DevTools MCP 服务器提供了 26 个工具，分为以下几类：

输入自动化（7个工具）

• 点击、填充表单、输入文本
• 悬停、键盘操作等交互功能

导航自动化（7个工具）

• 页面导航、前进后退
• 刷新、等待加载完成

模拟功能（3个工具）

• 设备模拟
• 地理位置模拟
• 网络条件模拟

性能分析（3个工具）

• 性能追踪记录
• 性能指标分析
• 优化建议生成

网络监控（2个工具）

• 网络请求列表
• 请求详情查看

调试工具（4个工具）

• 控制台消息查看
• JavaScript 执行
• 截图功能
• DOM 检查

系统要求

• Node.js: 20 或更新的 LTS 版本
• Chrome: 当前稳定版或更新版本
• npm: 包管理器

安装配置

通用配置

在你的 MCP 客户端配置文件中添加以下内容：

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

支持的 AI 编程助手

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor

通过 Cursor 设置界面：Settings -> MCP -> New MCP Server，使用上述配置

Gemini CLI

# 项目级别
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# 全局安装
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

按照 Cline 的 MCP 配置指南使用标准配置

配置选项

Chrome DevTools MCP 支持以下配置参数：

参数	类型	默认值	说明
--headless	boolean	false	是否以无头模式运行（无UI）
--isolated	boolean	false	创建临时用户数据目录，关闭后自动清理
--channel	string	stable	Chrome 版本频道（stable/canary/beta/dev）
--viewport	string	-	初始视口大小，如 1280x720
--executablePath / -e	string	-	自定义 Chrome 可执行文件路径
--browserUrl / -u	string	-	连接到运行中的 Chrome 实例
--proxyServer	string	-	代理服务器配置
--acceptInsecureCerts	boolean	false	忽略自签名和过期证书错误（谨慎使用）
--logFile	string	-	调试日志文件路径

配置示例

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

使用示例

基础测试

安装完成后，在你的 AI 助手中输入以下提示进行测试：

Check the performance of https://developers.chrome.com

AI 助手会自动：

1. 打开 Chrome 浏览器
2. 导航到指定网站
3. 记录性能追踪
4. 分析并提供性能优化建议

常见使用场景

1. 性能分析

分析 example.com 的加载性能并给出优化建议

2. 调试网络问题

检查 my-website.com 是否有 CORS 错误

3. 自动化测试

导航到 demo.realworld.io，填写登录表单并截图

4. 表单填充

在登录页面填写邮箱 test@example.com 和密码 testpass123

5. 控制台检查

查看当前页面的控制台错误信息

工作原理

Chrome DevTools MCP 基于 Model Context Protocol (MCP) 标准工作：

1. MCP 协议: 开源标准，用于连接大语言模型与外部工具和数据源
2. 工具暴露: 通过 MCP 协议暴露 Chrome DevTools 功能作为工具
3. AI 调用: AI 助手根据用户需求调用相应工具
4. 自动化执行: 使用 Puppeteer 在 Chrome 中执行操作
5. 结果返回: 将执行结果反馈给 AI 助手

示例流程

当你要求 AI 助手"检查网站性能"时：

用户: 检查我的网站性能
  ↓
AI 助手: 使用 performance_start_trace 工具
  ↓
MCP 服务器: 启动 Chrome，打开网站，记录性能追踪
  ↓
AI 助手: 分析性能数据
  ↓
用户: 收到性能分析报告和优化建议

数据目录

Chrome DevTools MCP 使用以下用户数据目录：

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

数据目录在运行之间不会被清除，除非使用 --isolated 选项。

安全注意事项

⚠️ 重要提示:

Chrome DevTools MCP 将浏览器实例的内容暴露给 MCP 客户端，允许它们检查、调试和修改浏览器或 DevTools 中的任何数据。

请避免分享你不想与 MCP 客户端共享的敏感或个人信息。

故障排除

如果遇到问题，请查看官方的故障排除指南。

常见问题

1. 浏览器未自动启动: MCP 服务器仅在客户端使用需要浏览器的工具时才会启动浏览器
2. 沙箱权限问题: 如果 MCP 客户端启用了沙箱，可能需要禁用或使用 --connect-url 连接到手动启动的 Chrome 实例
3. 启动超时: 在 Windows 上可能需要增加 startup_timeout_ms 配置

技术栈

• 核心: Node.js
• 浏览器自动化: Puppeteer
• 协议: Chrome DevTools Protocol (CDP)
• 标准: Model Context Protocol (MCP)

项目特点

1. 官方支持: 由 Chrome DevTools 团队官方开发和维护
2. 广泛兼容: 支持多种主流 AI 编程助手
3. 功能全面: 提供 26 个工具覆盖自动化、调试、性能分析
4. 易于集成: 使用 npx 无需本地安装，配置简单
5. 活跃开发: 持续更新和改进功能

适用场景

• Web 开发调试: AI 助手帮助识别和修复 bug
• 性能优化: 自动化性能分析和优化建议
• 自动化测试: 编写和执行浏览器自动化测试
• 网站监控: 检查网站功能和性能
• 开发验证: 验证代码更改在浏览器中的实际效果

反馈和贡献

该项目处于公开预览阶段，Chrome DevTools 团队正在积极寻求社区反馈：

• 如果有功能请求或发现问题，请在 GitHub Issues 提交
• 无论你是使用 AI 编程助手的开发者，还是构建下一代 AI 开发工具的供应商，你的见解都非常宝贵