Lzh on GitHub

浏览器使用

了解 Roo Code 如何控制浏览器以自动化网络任务、收集信息并使用 AI 驱动的浏览器自动化与 Web 应用程序交互。

Roo Code 提供复杂的浏览器自动化功能，让您能够直接从 VS Code 中与网站进行交互。此功能可以在不离开开发环境的情况下，测试 Web 应用程序、自动化浏览器任务和捕获屏幕截图。

需要模型支持
需要模型支持Roo Code 中的浏览器使用需要使用 Claude Sonnet 3.5 或 3.7

浏览器使用如何工作

默认情况下，Roo Code 使用一个内置浏览器，它：

  • 当您要求 Roo 访问网站时自动启动
  • 捕获网页的屏幕截图
  • 允许 Roo 与网页元素交互
  • 在后台不可见地运行

所有这些都直接在 VS Code 中发生，无需任何设置。

使用浏览器

典型的浏览器交互遵循此模式：

重要提示：浏览器使用需要 Claude Sonnet 3.5 或 3.7 模型。

  1. 要求 Roo 访问一个网站
  2. Roo 启动浏览器并向您显示屏幕截图
  3. 请求其他操作（点击、输入、滚动）
  4. Roo 完成后关闭浏览器

例如：

Open the browser and view our site.

Can you check if my website at https://roocode.com is displaying correctly?

Browse http://localhost:3000, scroll down to the bottom of the page and check if the footer information is displaying correctly.

浏览器操作如何工作

browser_action 工具控制一个浏览器实例，该实例在每次操作后返回屏幕截图和控制台日志，让您可以看到交互的结果。

主要特点：

  • 每个浏览器会话必须以 launch 开始并以 close 结束
  • 每条消息只能使用一个浏览器操作
  • 当浏览器处于活动状态时，不能使用其他工具
  • 您必须等待响应（屏幕截图和日志）才能执行下一个操作

可用的浏览器操作

操作描述使用时机
launch在 URL 处打开浏览器启动新的浏览器会话
click在特定坐标处点击与按钮、链接等交互
type将文本输入到活动元素中填写表单、搜索框
scroll_down向下滚动一页查看内容
scroll_up向上滚动一页返回到之前的内容
close关闭浏览器结束浏览器会话

浏览器使用配置/设置

默认浏览器设置：
  • 启用浏览器工具：已启用
  • 视口大小：小桌面 (900x600)
  • 屏幕截图质量：75%
  • 使用远程浏览器连接：已禁用

访问设置

要更改 Roo 中的浏览器/计算机使用设置：

  1. 点击齿轮图标 → 浏览器/计算机使用，打开设置

启用/禁用浏览器使用

目的：主开关，使 Roo 能够使用 Puppeteer 控制的浏览器与网站进行交互。

要更改此设置：

  1. 在您的 浏览器/计算机使用 设置中，选中或取消选中 启用浏览器工具 复选框

视口大小

目的：确定 Roo Code 使用的浏览器会话的分辨率。

权衡：较高的值提供更大的视口，但会增加令牌使用量。

要更改此设置：

  1. 在您的 浏览器/计算机使用 设置中，点击 “视口大小” 下的下拉菜单
  2. 选择以下可用选项之一：
  • 大桌面 (1280x800)
  • 小桌面 (900x600) - 默认值
  • 平板电脑 (768x1024)
  • 移动设备 (360x640)
  1. 选择您想要的分辨率。

屏幕截图质量

目的：控制浏览器屏幕截图的 WebP 压缩质量。

权衡：较高的值提供更清晰的屏幕截图，但会增加令牌使用量。

要更改此设置：

  1. 在您的 浏览器/计算机使用 设置中，调整 “屏幕截图质量” 下的滑块
  2. 设置一个介于 1-100% 之间的值（默认值为 75%）
  3. 较高的值提供更清晰的屏幕截图，但会增加令牌使用量：
  • 40-50%：适用于基本的基于文本的网站
  • 60-70%：适用于大多数通用浏览
  • 80%+：当细微的视觉细节至关重要时使用

远程浏览器连接

目的：将 Roo 连接到现有的 Chrome 浏览器，而不是使用内置浏览器。

优点：

  • 适用于容器化环境和远程开发工作流
  • 在浏览器使用之间保持已验证的会话
  • 消除重复的登录步骤
  • 允许使用带有特定扩展的自定义浏览器配置文件

要求：必须运行已启用远程调试的 Chrome。

要启用此功能：

  1. 在 浏览器/计算机使用 设置中，选中 “使用远程浏览器连接” 复选框
  2. 点击 “测试连接” 以进行验证

常见用例

  • DevContainers：从容器化的 VS Code 连接到主机 Chrome 浏览器
  • 远程开发：将本地 Chrome 与远程 VS Code 服务器一起使用
  • 自定义 Chrome 配置文件：使用带有特定扩展和设置的配置文件

连接到可见的 Chrome 窗口

连接到可见的 Chrome 窗口以实时观察 Roo 的交互：

  • macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run
  • Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=C:\chrome-debug --no-first-run
  • Linux
07.google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run