引言

WinClaw 最新版本集成了 Chrome DevTools MCP (Model Context Protocol) 服务器，为用户带来强大的浏览器自动化能力。这一功能让 AI 助手能够直接控制 Chrome 浏览器，实现网页导航、元素操作、截图、性能分析等功能。

什么是 Chrome DevTools MCP？

Chrome DevTools MCP 是 Google 官方开发的 MCP 服务器，它通过 Chrome DevTools Protocol (CDP) 暴露浏览器功能给 MCP 客户端。WinClaw 通过内置的 MCP bridge 插件，可以无缝连接到这个服务器，实现对 Chrome 的完全控制。

主要功能

1. 页面导航与控制

• 打开网页：直接导航到任意 URL
• 历史记录：前进、后退、刷新页面
• 多标签管理：创建新标签、切换标签、关闭标签

2. 元素交互

• 点击操作：点击页面上的任意元素（按钮、链接等）
• 文本输入：在输入框、文本区域填写内容
• 悬停效果：鼠标悬停在元素上查看效果
• 拖拽操作：将一个元素拖拽到另一个元素

3. 页面分析

• 快照功能：获取页面的可访问性树（A11y tree）结构
• 截图功能：截取整个页面或特定元素
• 控制台监控：读取浏览器控制台消息
• 网络监控：监控页面发出的所有网络请求

4. 性能分析

• 性能追踪：记录页面性能数据
• Core Web Vitals：分析 LCP、FID、CLS 等核心指标
• 性能洞察：获取优化建议

5. 高级功能

• JavaScript 执行：在页面上下文中执行自定义脚本
• 文件上传：自动上传文件到网页
• 对话框处理：自动处理 alert、confirm 等对话框
• 视口模拟：模拟不同设备和屏幕尺寸

实际应用场景

1. 自动化测试

可以使用自然语言描述测试场景，AI 会自动操作浏览器完成测试：

"帮我测试登录功能：打开登录页，输入用户名和密码，点击登录按钮，然后验证是否跳转到首页"

2. 数据采集

自动抓取网站数据：

"访问这个电商网站，找到所有价格低于 100 元的商品，保存到一个列表中"

3. 表单自动填写

批量填写在线表单：

"打开这个报名表单，填写以下信息..."

4. 网页截图

定时截图或按需截图：

"截取这个页面的完整截图，保存为 PNG 文件"

配置方法

步骤 1：启动 Chrome 调试模式

WinClaw 会自动启动带调试端口的 Chrome，或者你可以手动启动：

chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\Users\YOUR_NAME\.winclaw\chrome-debug-profile

步骤 2：配置 MCP Bridge

在 WinClaw 配置文件 (%USERPROFILE%\.winclaw\winclaw.json) 中添加 MCP 服务器配置：

{
  "plugins": {
    "entries": {
      "mcp-bridge": {
        "enabled": true,
        "config": {
          "servers": [
            {
              "name": "chrome-devtools",
              "transport": "stdio",
              "command": "cmd",
              "args": ["/c", "npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222"],
              "timeoutMs": 60000,
              "autoReconnect": true
            }
          ]
        }
      }
    }
  }
}

步骤 3：重启 Gateway

winclaw gateway restart

步骤 4：验证连接

在 WinClaw 中使用 MCP 工具验证：

mcp__chrome_devtools__list_pages

示例演示

示例 1：打开网站并截图

# 导航到网页
mcp__chrome_devtools__navigate_page(url="https://example.com")

# 截取完整页面
mcp__chrome_devtools__take_screenshot(fullPage=true, filePath="screenshot.png")

示例 2：搜索并点击

# 获取页面快照
snapshot = mcp__chrome_devtools__take_snapshot()

# 点击搜索按钮
mcp__chrome_devtools__click(uid="search_button_uid")

# 输入搜索关键词
mcp__chrome_devtools__fill(uid="search_input_uid", value="WinClaw AI")

技术亮点

• 官方支持：使用 Google 官方维护的 Chrome DevTools MCP 服务器
• 完整功能：支持所有 Chrome DevTools Protocol 功能
• 稳定可靠：基于成熟的 CDP 协议，经过广泛测试
• 易于使用：通过自然语言即可控制浏览器，无需编写代码
• 隐私安全：完全本地运行，浏览器数据不会上传到云端

注意事项

• Chrome 需要以调试模式运行（--remote-debugging-port）
• 默认端口为 9222，可在配置中修改
• 建议使用独立的用户数据目录，避免影响日常使用
• 某些网站可能有反自动化检测，请合理使用

总结

WinClaw 集成 Chrome DevTools MCP 后，将 AI 助手的能力扩展到了浏览器领域。无论是自动化测试、数据采集、表单填写还是网页截图，都可以通过简单的自然语言指令完成。这一功能进一步降低了浏览器自动化的门槛，让非技术人员也能轻松使用。

结合 WinClaw 现有的 Office 自动化、文件系统操作、多渠道消息等功能，你现在拥有了一个真正全能的个人 AI 助手！

相关链接

• WinClaw GitHub 仓库
• Chrome DevTools MCP 官方仓库
• Chrome DevTools Protocol 文档