Claude Code Browser MCP Setup

使用Chrome DevTools MCP服务器与Claude Code结合，以实现浏览器自动化和网页交互功能的文档。

概述

此设置允许Claude Code通过模型上下文协议（MCP）与Chrome浏览器进行交互。Chrome DevTools MCP服务器提供了以下工具：

• 页面导航和管理
• 网页快照和截图
• 点击、填写表单和页面元素交互
• 网络请求监控
• 性能分析
• 浏览器上下文中执行JavaScript

安装

1. 安装Chrome DevTools MCP服务器

npm install -g @modelcontextprotocol/server-chrome-devtools

或者使用npx（无需安装）：

npx @modelcontextprotocol/server-chrome-devtools

2. 配置Claude Code

在配置文件~/.config/claude/claude_desktop_config.json中添加MCP服务器：

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

如果全局安装了，可以使用：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "mcp-server-chrome-devtools"
    }
  }
}

3. 启动带有远程调试的Chrome

MCP服务器通过Chrome DevTools协议连接到Chrome。需要启动带有远程调试功能的Chrome：

macOS:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux:

google-chrome --remote-debugging-port=9222

Windows:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=222

4. 重启Claude Code

配置完成后，重启Claude Code以加载MCP服务器。

可用工具

Chrome DevTools MCP提供以下工具（所有工具名前缀为mcp__chrome-devtools__）：

页面管理

• list_pages - 列出所有打开的浏览器标签页
• select_page - 通过索引选择特定标签页
• new_page - 打开一个新标签页并指定URL
• navigate_page - 导航当前标签页到指定URL
• navigate_page_history - 在历史记录中前进或后退
• close_page - 关闭标签页
• resize_page - 调整浏览器窗口大小

页面检查

• take_snapshot - 获取页面文本快照，并为元素分配UID
• take_screenshot - 捕获页面或元素的截图
• evaluate_script - 在页面上下文中执行JavaScript

交互

• click - 点击元素（通过快照中的UID）
• fill - 填写输入字段
• fill_form - 一次性填写多个表单字段
• hover - 将鼠标悬停在元素上
• drag - 拖放元素
• upload_file - 通过文件输入上传文件
• handle_dialog - 处理浏览器警告/确认/提示框

网络

• list_network_requests - 获取自上次导航以来的所有网络请求
• get_network_request - 根据URL获取特定请求详情
• emulate_network - 模拟网络条件（3G、4G、离线）

性能

• performance_start_trace - 开始性能记录
• performance_stop_trace - 结束记录并获取结果
• performance_analyze_insight - 获取详细的性能洞察
• emulate_cpu - 限制CPU以进行测试

控制台

• list_console_messages - 获取控制台日志、警告和错误

等待

• wait_for - 等待特定文本出现在页面上

典型工作流程

1. 列出并选择页面：

   list_pages → select_page(0)
   

2. 导航到URL：

   navigate_page("https://example.com")
   

3. 拍摄快照以查看页面结构：

   take_snapshot → 返回所有可交互元素的UID
   

4. 与元素交互：

   click(uid="1_28")
   fill(uid="1_86", value="搜索词")
   

5. 监控网络活动：

   list_network_requests → 查看所有API调用和加载的资源
   

示例用例

1. 浏览Hacker News

1. navigate_page("https://news.ycombinator.com")
2. take_snapshot
3. 阅读头条新闻并决定点击什么
4. click(uid_of_interesting_article)
5. take_snapshot以阅读文章

2. 发帖到Twitter/X

1. navigate_page("https://x.com")
2. take_snapshot
3. fill(uid_of_tweet_box, "您的推文内容")
4. click(uid_of_post_button)

3. 自动化测试

1. navigate_page("http://localhost:3000")
2. take_screenshot以进行视觉比较
3. 使用测试数据填写表单
4. 点击提交按钮
5. wait_for("成功消息")
6. list_console_messages以检查错误

4. 性能分析

1. performance_start_trace(reload=true, autoStop=true)
2. 等待跟踪完成
3. performance_analyze_insight("LCPBreakdown")
4. 获取详细的Core Web Vitals数据

提示和最佳实践

1. 始终先拍摄快照 - 在与页面交互之前，拍摄快照以查看可用元素及其UID。
2. 使用具体的UID - 快照中的每个元素都有一个唯一的UID。始终使用这些UID进行可靠的交互。
3. 处理动态内容 - 使用wait_for等待导航或交互后的内容加载。
4. 网络监控 - 在导航前启用网络监控以捕获所有请求。
5. 错误处理 - 使用list_console_messages检查控制台消息以调试问题。
6. 清理 - 使用close_page关闭已完成的标签页，以保持浏览器整洁。

故障排除

MCP服务器无法连接

• 确保Chrome已使用--remote-debugging-port=9222运行
• 检查是否有其他进程占用端口9222
• 尝试重新启动Chrome和Claude Code

未找到元素

• 在点击前拍摄新的快照 - 页面更新时UID会变化
• 确保页面完全加载后再拍摄快照
• 对于动态内容使用wait_for

超时

• 在导航调用中增加超时参数
• 检查网络状况 - 使用emulate_network进行测试
• 确认页面确实在Chrome中加载

安全注意事项

• 远程调试端口（9222）允许对浏览器进行全面控制
• 仅在受信任的网络上使用
• 不要将调试端口暴露给外部网络
• 考虑使用单独的Chrome配置文件进行自动化

额外资源

• Chrome DevTools协议文档
• 模型上下文协议规范
• Claude Code文档

会话示例

这是一个真实的会话示例：

1. 从浏览Hacker News开始，寻找有趣的帖子
2. 发现了一篇关于形式验证代码的文章
3. 点击阅读全文
4. 导航到Twitter/X
5. 编写并发布了一条关于该文章的关键见解的推文

所有这些都是通过Claude Code使用自然语言命令完成的，而MCP服务器则在后台处理浏览器自动化。