Skip to main content

浏览器使用

Roo Code 提供了先进的浏览器自动化功能，让您能够直接从 VS Code 与网站进行交互。此功能支持测试 Web 应用程序、自动化浏览器任务以及截取屏幕截图，无需离开开发环境。

需要模型支持

Roo Code 中的浏览器使用功能需要支持图像处理的模型。某些模型可能无法很好地导航网页。

浏览器使用工作原理​

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

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

所有操作都直接在 VS Code 中完成，无需额外设置。

使用浏览器功能​

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

重要提示： 浏览器使用功能需要支持图像处理的模型（具备视觉能力的模型）。

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

例如：

打开浏览器并查看我们的网站。
能否检查一下我在 https://roocode.com 上的网站是否显示正常？
浏览 http://localhost:3000，向下滚动到页面底部，检查页脚信息是否显示正确。
浏览器使用示例

浏览器操作工作原理​

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

主要特点：

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

可用的浏览器操作​

操作描述使用场景
launch在指定 URL 打开浏览器开始新的浏览器会话
click点击特定坐标位置与按钮、链接等进行交互
type在活动元素中输入文本填写表单、搜索框
scroll_down向下滚动一页查看折叠内容下方的内容
scroll_up向上滚动一页返回之前的内容
close关闭浏览器结束浏览器会话
hover将光标移动到指定坐标触发悬停状态
press按下按键组合键盘快捷键、回车、ESC
resize调整视口大小测试响应式设计

浏览器使用配置/设置​

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

访问设置​

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

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

    浏览器设置菜单

启用/禁用浏览器使用​

用途：主开关，用于启用 Roo 使用 Puppeteer 控制的浏览器与网站进行交互。

要更改此设置：

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

    启用浏览器工具设置

视口大小​

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

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

要更改此设置：

  1. 在浏览器/计算机使用设置中点击"视口大小"下方的下拉菜单

  2. 选择以下可用选项之一：

    • 大型桌面 (1280x800)
    • 小型桌面 (900x600) - 默认
    • 平板 (768x1024)
    • 手机 (360x640)

  3. 选择您想要的分辨率。

    视口大小设置

截图质量​

用途：控制浏览器截图的 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

google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run