STARWARCLOUD STARWAR.AI
返回市场
克劳德代码浏览器MCP配置

克劳德代码浏览器MCP配置

作者：haasonsaas6 星标更新：2025-10-13
安装使用来源：spider==github.com

项目介绍

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配置文件进行自动化

额外资源

会话示例

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

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

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