Claude Code Browser MCP Setup

Claude代码浏览器MCP设置

使用Chrome DevTools MCP服务器和Claude Code实现浏览器自动化和web交互功能的文档。

概述

此设置允许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.配置克劳德代码

将MCP服务器添加到Claude Code配置文件中 ~/.config/claude/claude_desktop_config.json:

{
  "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

窗户：

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

4.重新启动克劳德代码

配置后，重新启动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)

1. 导航到URL：

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

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

   take_snapshot → Returns UIDs for all interactive elements

1. 与元素交互：

   click(uid="1_28")
   fill(uid="1_86", value="search term")

1. 监控网络活动：

   list_network_requests → See all API calls, resources loaded

示例用例

1.浏览黑客新闻

1. navigate_page("https://news.ycombinator.com")
2. take_snapshot
3. Read headlines and decide what to click
4. click(uid_of_interesting_article)
5. take_snapshot to read the article

2.发布到推特/X

1. navigate_page("https://x.com")
2. take_snapshot
3. fill(uid_of_tweet_box, "Your tweet content")
4. click(uid_of_post_button)

3.自动化测试

1. navigate_page("http://localhost:3000")
2. take_screenshot for visual comparison
3. fill_form with test data
4. click submit button
5. wait_for("Success message")
6. list_console_messages to check for errors

4.性能分析

1. performance_start_trace(reload=true, autoStop=true)
2. Wait for trace to complete
3. performance_analyze_insight("LCPBreakdown")
4. Get detailed Core Web Vitals data

提示和最佳实践

1. 始终先拍摄快照 -在与页面交互之前，拍摄快照以查看可用元素及其UID。

1. 使用特定的UID -每个元素在快照中都有一个唯一的UID。始终使用这些进行可靠的交互。

1. 处理动态内容 -使用 wait_for 当在导航或交互后等待内容加载时。

1. 网络监控 -在导航以捕获所有请求之前启用网络监控。

1. 错误处理 -检查控制台消息 list_console_messages 调试问题。

1. 清理 -关闭您已使用完毕的选项卡 close_page 以保持浏览器的可管理性。

故障排除

MCP服务器未连接

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

未找到元素

• 在单击之前拍摄一张新的快照-UID会在页面更新时更改
• 在拍摄快照之前，确保页面已完全加载
• 使用 wait_for 用于动态内容

超时

• 增加导航调用中的超时参数
• 检查网络状况-使用 emulate_network 测试
• 验证页面是否正在Chrome中实际加载

安全说明

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

其他资源

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

会话示例

以下是我们会议中的一个真实示例：

1. 首先浏览Hacker News以查找有趣的文章
2. 找到了一篇关于正式验证代码的文章
3. 点击阅读全文
4. 导航到推特/X
5. 撰写并发布了一条关于这篇文章的推文，其中包含了关键见解

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