OpenClaw 操控浏览器

如何通过 OpenClaw 实现 Chrome 浏览器自动化操控

在软件开发与自动化测试领域，持续学习是常态。本文旨在详细介绍如何利用 OpenClaw 连接并控制一个已开启的 Chrome 浏览器实例，实现点击、文本输入、文件上传、页面滚动、屏幕截图以及执行 JavaScript 等自动化操作。整个过程的核心前提，是正确配置 Chrome 以启用远程调试协议。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

第一步：确保 Chrome 以调试模式启动（开启远程调试端口）

首先，您需要以调试模式启动 Chrome 浏览器。请在命令行或终端中执行类似以下格式的命令：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\remote-debug-profile" --no-first-run --disable-infobars

其中关键参数解析如下：--remote-debugging-port=9222 是核心指令，用于开启 Chrome DevTools Protocol (CDP) 的访问端口。若遇到权限限制，可追加 --no-sandbox 参数；为减少浏览器扩展的潜在干扰，建议添加 --disable-extensions。

启动后，如何验证是否成功？您可以在另一个普通 Chrome 窗口中访问 http://localhost:9222/json/version。若配置正确，将返回类似以下的 JSON 数据：

{
  "Browser": "Chrome/xxx",
  "Protocol-Version": "1.3",
  "User-Agent": "...",
  "V8-Version": "...",
  "WebKit-Version": "...",
  "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/xxxx-xxxx-xxxx-xxxx"
}

只要能看到包含 webSocketDebuggerUrl 字段的响应，即证明 CDP 服务已正常运行，可供外部连接。

第二步：在 OpenClaw 中添加远程调试配置文件

接下来，您需要在 OpenClaw 中配置如何连接到这个处于调试状态的浏览器。OpenClaw 的配置文件通常位于：

Windows 系统: C:\Users\你的用户名\.openclaw\config.json （具体路径可能因安装方式或项目结构而异）。

我们更推荐通过 OpenClaw 的图形用户界面 (GUI) 或命令行界面 (CLI) 进行配置，macOS/Windows 客户端通常提供更直观的操作方式。

您需要编辑（或创建）配置文件中的 profiles 部分，配置示例如下：

{
  "profiles": {
    "my-chrome-debug": {
      "type": "remote",
      "cdpUrl": "ws://localhost:9222/devtools/browser",
      "color": "#FF5555", // 可选，用于界面标识的颜色
      "name": "My Debug Chrome" // 可选，自定义显示名称
    }
  }
}

关键配置项说明：cdpUrl 必须是一个 WebSocket 地址。最简便的方法是，直接将第一步中从 http://localhost:9222/json/version 页面获取的完整 "webSocketDebuggerUrl" 值复制粘贴至此。

如果浏览器每次启动生成的标识符 (UUID) 都不同，您也可以尝试使用简写形式："ws://127.0.0.1:9222"，OpenClaw 会尝试自动发现可用的 WebSocket 端点。但为了确保连接的稳定性，我们强烈建议使用完整的 ws 路径。

保存配置文件后，请重启 OpenClaw gateway 服务（若使用 CLI，命令通常为 openclaw gateway restart，或通过系统托盘图标操作）。

第三步：在 OpenClaw 的智能体或技能中调用此配置文件

配置文件生效后，在使用浏览器自动化功能时，必须明确指定此配置文件，否则 OpenClaw 将可能使用默认的本地启动模式或扩展模式。

具体调用方法示例如下（可直接在对话中使用自然语言，或在 skill / hook 脚本中定义）：

自然语言指令示例：

请使用名为 my-chrome-debug 的浏览器配置文件，打开 https://example.com 并完成登录操作。

显式工具调用（适用于支持明确工具调用的智能体）：

{
  "tool": "browser",
  "args": {
    "profile": "my-chrome-debug",
    "action": "goto",
    "url": "https://twitter.com/login"
  }
}

那么，OpenClaw 的浏览器自动化工具具体支持哪些功能？根据其官方文档，核心操作包括但不限于以下列表（请以 docs.openclaw.ai/tools/browser 的最新文档为准）：

其中，文件上传（如图片、视频）是一个极具实用价值的场景。典型的操作流程为：

1. 首先，对目标页面执行一次 snapshot 操作 → 此操作会帮助您定位到文件上传输入框的元素引用（例如 @7）。
2. 随后，即可直接对此引用进行操作：

使用 my-chrome-debug 浏览器，在 @7 这个上传控件中上传本地文件 C:\videos\demo.mp4

或使用更底层的参数调用方式：

browser profile=my-chrome-debug upload selector="input[type='file'][accept='video']" file="C:/path/to/video.mp4"

此功能背后，OpenClaw 是通过 CDP 的 Page.setFileInputFiles 命令实现的，支持传入本地文件的绝对路径。

故障排查与常见问题解决

在配置和使用过程中，可能会遇到一些问题，以下是一些排查思路：

• 连接失败？ 首先确认 http://localhost:9222 是否可以访问；检查调试用的 Chrome 窗口是否仍然开启；使用 netstat -ano | find "9222" 命令查看 9222 端口是否被占用。
• 总是进入 Chrome 扩展模式？ 请在指令中强制指定 profile="my-chrome-debug"，或在 config 配置中将 defaultBrowserProfile 设置为您的远程调试配置文件。
• 找不到页面元素？ 可先使用 snapshot 功能查看页面结构。许多智能体会自动生成带有 @编号 标记的元素地图，优先使用 @ref 引用进行点击或填写，能显著提升稳定性。
• 希望观察操作过程？ 可以同时在另一个标签页打开 chrome://inspect，并连接至同一个 9222 端口，即可在 DevTools 中实时监控每一步自动化操作。
• 重要安全提示： 此远程调试配置文件拥有您当前 Chrome 浏览器中的所有 Cookie 和登录状态。请务必谨慎操作，避免让智能体执行任何涉及支付或敏感信息的操作，确保自动化流程的安全可控。

总而言之，只要正确配置好 remote profile，后续的浏览器自动化操控将变得非常顺畅。OpenClaw 通过 CDP 协议提供的这套 Web 自动化能力极为强大，足以覆盖绝大多数网页交互与测试场景。剩下的，便是结合您的具体需求，设计和构建高效、可靠的自动化工作流。