Chrome DevTools MCP - 浏览器自动化集成

Chrome DevTools MCP 通过模型上下文协议（MCP）将 Chrome 浏览器与 Claude AI 连接，允许 Claude 直接控制浏览器、操作网页元素、捕获屏幕截图和分析网络请求。这是一个强大的浏览器自动化和测试工具。

功能特性

核心功能

页面导航：打开网页、前进、后退、刷新
元素操作：点击、填充表单、拖拽元素
页面分析：捕获快照、截图、查看 DOM 结构
网络监控：查看网络请求、响应数据
控制台监控：查看 JavaScript 控制台消息和错误
JavaScript 执行：在页面中运行自定义 JavaScript 代码
性能分析：记录和分析页面性能
多页面管理：同时操作多个浏览器标签页

高级功能

表单自动填充：批量填写表单字段
文件上传：自动上传文件
对话框处理：处理 alert、confirm、prompt 对话框
网络限速：模拟慢速网络环境
CPU 限速：模拟低性能设备
页面大小调整：测试响应式设计
等待元素：等待特定文本出现在页面上

系统要求

Chrome 浏览器：最新版本（推荐）
Node.js：14.0 或更高版本
npm：6.0 或更高版本

安装步骤

1. 安装 Chrome 浏览器

如果尚未安装 Chrome，请从 Chrome 官网下载并安装。

2. 配置 MCP 服务器

Claude Desktop 集成

打开 Claude Desktop
前往 Claude → 设置 → 开发者 → 编辑配置
在 claude_desktop_config.json 中添加：

json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-chrome-devtools"
      ]
    }
  }
}

Cursor 集成

macOS/Linux 用户：

前往设置 → 管理控制面板，然后添加：

json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-chrome-devtools"
      ]
    }
  }
}

Windows 用户：

前往设置 → 管理控制面板 → 添加服务器：

json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-chrome-devtools"
      ]
    }
  }
}

Claude Code 集成

Claude Code 是 Anthropic 官方的命令行工具，支持通过简单命令安装 MCP 服务器。

安装 Chrome DevTools MCP：

bash

# 使用 Claude Code 的 mcp add 命令
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

这个命令会自动：

添加 Chrome DevTools MCP 到 Claude Code 配置
配置正确的启动命令
自动加载 MCP 服务器

验证安装：

bash

# 列出已安装的 MCP 服务器
claude mcp list

# 应该看到 chrome-devtools 在列表中

在 Claude Code 中使用：

bash

# 启动 Claude Code
claude

# 在对话中直接使用浏览器命令
> 使用 chrome-devtools 打开 https://example.com 并截图

卸载 MCP 服务器（如需要）：

bash

# 移除 Chrome DevTools MCP
claude mcp remove chrome-devtools

提示

Claude Code 会自动检测并加载所有已安装的 MCP 服务器。无需手动编辑配置文件！

3. 启动 Chrome 浏览器（调试模式）

Chrome DevTools MCP 需要 Chrome 在调试模式下运行。

macOS 系统：

bash

# 方法 1：直接启动
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# 方法 2：使用别名（推荐）
echo 'alias chrome-debug="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222"' >> ~/.zshrc
source ~/.zshrc
chrome-debug

Windows 系统：

cmd

# PowerShell 中运行
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

# 或者创建快捷方式，在目标路径后添加：
--remote-debugging-port=9222

Linux 系统：

bash

google-chrome --remote-debugging-port=9222
# 或
chromium --remote-debugging-port=9222

重要提示

启动调试模式前，请关闭所有 Chrome 窗口
调试模式下的 Chrome 会显示 "Chrome 正在受到自动测试软件的控制" 提示
默认端口是 9222，如需更改端口，需同时更新 MCP 配置

4. 验证连接

重启 Claude Desktop 或 Cursor
在 Chrome 调试模式下打开任意网页
在 Claude 中输入测试命令：

使用 chrome-devtools 请帮我打开 https://www.google.com 并截图

如果看到 Chrome DevTools 工具图标并成功执行，说明配置成功！

使用方法

基础操作

页面导航

打开 https://example.com

刷新当前页面

后退到上一页

前进到下一页

页面截图

截取当前页面的屏幕截图

截取整个页面的完整截图（包括滚动区域）

截取某个元素的截图

页面快照

获取当前页面的 DOM 结构快照

获取详细的页面快照（包括完整的可访问性树）

元素操作

点击元素

点击页面上的"登录"按钮

双击页面上的标题

填充表单

在搜索框中输入"Claude AI"

填写登录表单：
- 用户名：user@example.com
- 密码：password123

拖拽元素

将左侧的元素拖拽到右侧容器中

文件上传

上传文件 /path/to/file.pdf 到上传按钮

高级操作

执行 JavaScript

在页面中执行 JavaScript 代码：
document.title = 'New Title';

获取页面中所有链接的 href 属性

网络监控

查看页面的所有网络请求

查看最近的 10 个 XHR 请求

显示所有失败的网络请求

控制台监控

查看 JavaScript 控制台的错误信息

查看最近 20 条控制台日志

性能分析

开始记录页面性能，然后刷新页面

停止性能记录并分析结果

查看 Core Web Vitals 指标

网络限速

模拟 Slow 3G 网络环境

模拟 Fast 4G 网络

禁用网络限速

CPU 限速

将 CPU 速度降低到原来的 4 倍慢

恢复正常 CPU 速度

页面大小调整

将页面大小调整为 1920x1080

将页面大小调整为 iPhone 14 的屏幕大小（390x844）

多页面管理

列出所有页面

显示所有打开的浏览器标签页

切换页面

切换到第 2 个标签页

创建新页面

打开新标签页并访问 https://example.com

关闭页面

关闭第 3 个标签页

处理对话框

处理 alert 对话框，点击确定

处理 confirm 对话框，点击取消

处理 prompt 对话框，输入"Hello World"

等待元素

等待页面上出现"加载完成"文字

等待页面上出现"登录成功"文字（最多等待 10 秒）

实用场景示例

场景 1：自动化测试登录流程

1. 打开 https://example.com/login
2. 在用户名框中输入 test@example.com
3. 在密码框中输入 password123
4. 点击登录按钮
5. 等待页面上出现"欢迎回来"文字
6. 截取登录成功后的屏幕截图

场景 2：爬取网页数据

1. 打开 https://news.ycombinator.com
2. 获取页面快照
3. 执行 JavaScript 获取所有新闻标题和链接
4. 将结果整理成表格格式

场景 3：性能测试

1. 打开性能记录
2. 访问 https://example.com
3. 模拟 Slow 3G 网络
4. 刷新页面
5. 停止性能记录
6. 分析 Core Web Vitals 指标
7. 提供优化建议

场景 4：响应式设计测试

1. 打开 https://example.com
2. 截取桌面版本的截图（1920x1080）
3. 调整页面大小为 iPad（768x1024）
4. 截取 iPad 版本的截图
5. 调整页面大小为 iPhone（390x844）
6. 截取手机版本的截图
7. 对比三个版本的布局差异

场景 5：表单自动填写

1. 打开 https://example.com/signup
2. 批量填写注册表单：
   - 姓名：张三
   - 邮箱：zhangsan@example.com
   - 电话：13800138000
   - 地址：北京市朝阳区
3. 点击注册按钮
4. 截图保存结果

环境变量配置

可以通过环境变量自定义 Chrome DevTools 连接：

bash

# Chrome 调试端口（默认 9222）
export CHROME_REMOTE_DEBUGGING_PORT=9222

# Chrome 主机地址（默认 localhost）
export CHROME_REMOTE_DEBUGGING_HOST=localhost

故障排除

问题 1：无法连接到 Chrome

症状：提示 "无法连接到 Chrome 调试端口"

解决方案：

确保 Chrome 在调试模式下运行

检查端口 9222 是否被占用：

bash

# macOS/Linux
lsof -i :9222

# Windows
netstat -ano | findstr :9222

关闭所有 Chrome 窗口后重新启动调试模式
检查防火墙是否阻止了端口 9222

问题 2：元素无法点击

症状：提示 "找不到元素" 或 "元素不可点击"

解决方案：

先获取页面快照，查看元素的准确描述
等待页面完全加载后再操作
使用更具体的元素描述
检查元素是否被其他元素遮挡

问题 3：截图失败

症状：截图返回空白或错误

解决方案：

确保页面已完全加载
等待 2-3 秒后再截图
检查页面是否有弹窗遮挡
尝试使用非全屏截图

问题 4：JavaScript 执行失败

症状：执行 JavaScript 代码时报错

解决方案：

检查 JavaScript 语法是否正确
确保在正确的上下文中执行
查看控制台错误信息
使用 await 处理异步操作

问题 5：性能记录无法启动

症状：提示 "性能记录已在运行" 或 "无法启动"

解决方案：

先停止之前的性能记录
刷新页面后重试
重启 Chrome 调试模式

最佳实践

1. 页面加载等待

在操作页面元素前，确保页面完全加载：

1. 打开 https://example.com
2. 等待页面上出现"主要内容"
3. 然后进行后续操作

2. 明确的元素描述

使用清晰、具体的元素描述：

✅ 好的描述：点击页面顶部导航栏中的蓝色"登录"按钮
❌ 不好的描述：点击按钮

3. 错误处理

在自动化流程中加入错误检查：

1. 尝试点击登录按钮
2. 如果出现错误提示，截图保存
3. 检查控制台是否有错误信息

4. 截图记录

在关键步骤后截图，方便后续分析：

1. 填写表单
2. 截图保存表单填写结果
3. 点击提交
4. 截图保存提交后的页面

5. 网络监控

在需要分析 API 调用时，先开启网络监控：

1. 清除之前的网络请求记录
2. 执行操作
3. 查看网络请求列表
4. 分析 API 响应数据

安全注意事项

安全警告

Chrome 调试模式会降低浏览器安全性
不要在调试模式下访问敏感网站或输入敏感信息
不要在生产环境中使用调试模式
使用完毕后立即关闭调试模式

其他注意事项

自动填写的表单数据可能被记录，注意隐私保护
执行的 JavaScript 代码可以访问页面中的所有数据
网络请求和响应内容可能包含敏感信息
截图可能包含隐私信息，注意保存位置

技术细节

通信协议

Chrome DevTools MCP 使用 Chrome DevTools Protocol (CDP) 与浏览器通信：

WebSocket 连接：通过 WebSocket 连接到 Chrome 调试端口
CDP 命令：发送标准 CDP 命令控制浏览器
事件监听：监听浏览器事件（页面加载、网络请求等）

支持的 CDP 功能

Page Domain：页面导航、截图、DOM 操作
Runtime Domain：JavaScript 执行、控制台监控
Network Domain：网络请求拦截和分析
Performance Domain：性能数据收集和分析
Input Domain：鼠标、键盘、触摸事件模拟
Emulation Domain：设备模拟、网络限速

社区与支持

GitHub 仓库：modelcontextprotocol/servers
问题反馈：在 GitHub Issues 中提交
讨论论坛：加入 MCP 社区讨论

常见问题 (FAQ)

Q: Chrome DevTools MCP 和 Puppeteer 有什么区别？

A: Chrome DevTools MCP 是通过自然语言与 Claude 交互来控制浏览器，而 Puppeteer 需要编写 JavaScript 代码。MCP 更适合快速测试和探索，Puppeteer 更适合复杂的自动化脚本。

Q: 可以同时控制多个 Chrome 实例吗？

A: 可以，但需要为每个实例指定不同的调试端口，并相应修改 MCP 配置。

Q: 支持 Chromium 或 Edge 浏览器吗？

A: 支持！所有基于 Chromium 的浏览器都支持，包括 Microsoft Edge、Brave、Opera 等。只需使用相应浏览器的可执行文件启动调试模式即可。

Q: 如何在无头模式下运行？

A: 在启动命令中添加 --headless 参数：

bash

chrome --remote-debugging-port=9222 --headless

Q: 可以在 Docker 容器中使用吗？

A: 可以，但需要配置 X11 转发或使用无头模式，并确保容器有足够的权限。

更新日志

查看 GitHub Releases 了解最新功能和修复。

许可证

Chrome DevTools MCP 遵循 MIT 许可证。

我们可以帮助您吗?

加入交流群

Chrome DevTools MCP - 浏览器自动化集成 ​

功能特性 ​

核心功能 ​

高级功能 ​

系统要求 ​

安装步骤 ​

1. 安装 Chrome 浏览器 ​

2. 配置 MCP 服务器 ​

Claude Desktop 集成 ​

Cursor 集成 ​

Claude Code 集成 ​

3. 启动 Chrome 浏览器（调试模式） ​

4. 验证连接 ​

使用方法 ​

基础操作 ​

页面导航 ​

页面截图 ​

页面快照 ​

元素操作 ​

点击元素 ​

填充表单 ​

拖拽元素 ​

文件上传 ​

高级操作 ​

执行 JavaScript ​

网络监控 ​

控制台监控 ​

性能分析 ​

网络限速 ​

CPU 限速 ​

页面大小调整 ​

多页面管理 ​

列出所有页面 ​

切换页面 ​

创建新页面 ​

关闭页面 ​

处理对话框 ​

等待元素 ​

实用场景示例 ​

场景 1：自动化测试登录流程 ​

场景 2：爬取网页数据 ​

场景 3：性能测试 ​

场景 4：响应式设计测试 ​

场景 5：表单自动填写 ​

环境变量配置 ​

故障排除 ​

问题 1：无法连接到 Chrome ​

问题 2：元素无法点击 ​

问题 3：截图失败 ​

问题 4：JavaScript 执行失败 ​

问题 5：性能记录无法启动 ​

最佳实践 ​

1. 页面加载等待 ​

2. 明确的元素描述 ​

3. 错误处理 ​

4. 截图记录 ​

5. 网络监控 ​

安全注意事项 ​

其他注意事项 ​

技术细节 ​

通信协议 ​

支持的 CDP 功能 ​

相关资源 ​

社区与支持 ​

常见问题 (FAQ) ​

Q: Chrome DevTools MCP 和 Puppeteer 有什么区别？ ​

Q: 可以同时控制多个 Chrome 实例吗？ ​

Q: 支持 Chromium 或 Edge 浏览器吗？ ​

Q: 如何在无头模式下运行？ ​

Q: 可以在 Docker 容器中使用吗？ ​

更新日志 ​

许可证 ​

Chrome DevTools MCP - 浏览器自动化集成

功能特性

核心功能

高级功能

系统要求

安装步骤

1. 安装 Chrome 浏览器

2. 配置 MCP 服务器

Claude Desktop 集成

Cursor 集成

Claude Code 集成

3. 启动 Chrome 浏览器（调试模式）

4. 验证连接

使用方法

基础操作

页面导航

页面截图

页面快照

元素操作

点击元素

填充表单

拖拽元素

文件上传

高级操作

执行 JavaScript

网络监控

控制台监控

性能分析

网络限速

CPU 限速

页面大小调整

多页面管理

列出所有页面

切换页面

创建新页面

关闭页面

处理对话框

等待元素

实用场景示例

场景 1：自动化测试登录流程

场景 2：爬取网页数据

场景 3：性能测试

场景 4：响应式设计测试

场景 5：表单自动填写

环境变量配置

故障排除

问题 1：无法连接到 Chrome

问题 2：元素无法点击

问题 3：截图失败

问题 4：JavaScript 执行失败

问题 5：性能记录无法启动

最佳实践

1. 页面加载等待

2. 明确的元素描述

3. 错误处理

4. 截图记录

5. 网络监控

安全注意事项

其他注意事项

技术细节

通信协议

支持的 CDP 功能

相关资源

社区与支持

常见问题 (FAQ)

Q: Chrome DevTools MCP 和 Puppeteer 有什么区别？

Q: 可以同时控制多个 Chrome 实例吗？

Q: 支持 Chromium 或 Edge 浏览器吗？

Q: 如何在无头模式下运行？

Q: 可以在 Docker 容器中使用吗？

更新日志

许可证