Skip to main content

浏览器使用

itBuilder 提供复杂的浏览器自动化功能，让您可以直接从 VS Code 与网站交互。此功能支持测试 Web 应用程序、自动化浏览器任务和捕获截图，而无需离开您的开发环境。

需要模型支持

itBuilder 中的浏览器使用需要使用 Claude Sonnet 3.5 或 3.7

浏览器使用的工作原理​

默认情况下，itBuilder 使用内置浏览器，该浏览器：

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

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

使用浏览器功能​

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

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

  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关闭浏览器结束浏览器会话

浏览器使用配置/设置​

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

访问设置​

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

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

    浏览器设置菜单

启用/禁用浏览器使用​

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

要更改此设置：

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

    启用浏览器工具设置

视口大小​

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

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

要更改此设置：

  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