AI导哈

浏览器自动化工具

通过Chrome DevTools MCP服务器实现浏览器自动化，支持页面导航、元素交互、网络监控和性能分析等功能。

  • by haasonsaas
  • Shell
  • 本地部署
  • 14 星标
  • 更新于
在 GitHub 查看 haasonsaas/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)

  2. 导航到URL：

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

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

    take_snapshot → Returns UIDs for all interactive elements

  4. 与元素交互：

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

  5. 监控网络活动：

    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。

  2. 使用特定的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配置文件进行自动化

其他资源

会话示例

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

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

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

相关 MCP