在VS Code中直接操控浏览器
对于开发者而言，频繁在代码编辑器、浏览器和终端之间切换是常态，但这样的工作流往往效率低下且容易分心。Roo Code可以让开发者能够直接在VS Code中完成网页交互操作，无需跳出开发环境。
核心能力：内置浏览器自动化
Roo Code提供了一套成熟的浏览器自动化方案，允许用户直接从VS Code与网站进行交互。这意味着开发者可以在不离开IDE的情况下测试网页应用、自动化浏览器任务，甚至捕获页面截图。
值得一提的是，要使用浏览器功能，需要选择Claude Sonnet 3.5或3.7模型的支持。
工作原理：无缝的浏览器交互体验
Roo Code内置的浏览器设计精巧，具备以下特性：
- 自动启动：当要求访问网站时自动开启
- 页面截图：自动捕获网页截图
- 元素交互：支持与网页元素进行交互
- 后台运行：所有操作在后台静默完成
整个过程完全在VS Code内部完成，无需任何额外配置。
使用流程：简单直观的操作模式
典型的浏览器交互遵循以下模式：
- 请求Roo访问指定网站
- Roo启动浏览器并显示页面截图
- 请求执行额外操作（点击、输入、滚动）
- 任务完成后自动关闭浏览器
例如，可以这样操作：
- “打开浏览器并查看我们的网站”
- “能否检查https://roocode.com网站是否显示正常？”
- “浏览http://localhost:3000，滚动到页面底部检查页脚信息是否正确显示”
技术实现：精准的浏览器动作控制
browser_action工具控制着浏览器实例，每次操作后都会返回截图和控制台日志，让用户可以清晰看到交互结果。
重要特性包括：
- 每个浏览器会话必须以launch开始，以close结束
- 每条消息只能执行一个浏览器动作
- 浏览器活动期间无法使用其他工具
- 必须等待前一个操作的响应（截图和日志）后才能执行下一个动作
支持的操作类型
Roo Code提供了六种核心浏览器操作：
| 操作类型 | 描述 | 使用场景 |
|---|---|---|
| launch | 在指定URL打开浏览器 | 开始新的浏览器会话 |
| click | 点击特定坐标 | 与按钮、链接等交互 |
| type | 在活动元素中输入文本 | 填写表单、搜索框 |
| scroll_down | 向下滚动一页 | 查看折叠内容 |
| scroll_up | 向上滚动一页 | 返回之前的内容 |
| close | 关闭浏览器 | 结束浏览器会话 |
个性化配置：根据需求调整设置
Roo Code提供了灵活的配置选项：
默认浏览器设置
- 浏览器工具启用：已启用
- 视窗尺寸：小桌面（900x600）
- 截图质量：75%
- 使用远程浏览器连接：禁用
访问设置
通过点击齿轮图标 → Browser / Computer Use即可进入设置菜单
启用/禁用浏览器功能
这是主开关，控制Roo是否可以使用Puppeteer控制的浏览器与网站交互。只需在设置中勾选或取消"Enable browser tool"复选框。
视窗尺寸设置
决定浏览器会话的分辨率，需要在清晰度和token使用量之间权衡。提供四种选项：
- 大桌面（1280x800）
- 小桌面（900x600）- 默认
- 平板（768x1024）
- 移动设备（360x640）
截图质量设置
控制浏览器截图的WebP压缩质量，同样需要在清晰度和token使用量之间平衡。质量范围1-100%（默认75%）：
- 40-50%：适合基本文本网站
- 60-70%：适合大多数常规浏览
- 80%+：当需要查看精细视觉细节时使用
高级功能：远程浏览器连接
这个功能允许Roo连接到现有的Chrome浏览器，而不是使用内置浏览器，特别适用于：
- 容器化环境：从容器化的VS Code连接到主机Chrome浏览器
- 远程开发：将本地Chrome与远程VS Code服务器配合使用
- 自定义配置：使用具有特定扩展和设置的配置文件
启用方法
在Browser / Computer Use设置中勾选"Use remote browser connection"框，然后点击"Test Connection"进行验证。
实时连接可见Chrome窗口
要实时观察Roo的交互操作，可以连接到一个可见的Chrome窗口：
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
总结
Roo Code的浏览器自动化功能为开发者提供了一个高度集成的工作环境，极大地提升了开发效率。无论是进行简单的页面检查，还是复杂的交互测试，都可以在熟悉的VS Code界面中完成，真正实现了"开发不离IDE"的流畅体验。对于追求效率的现代开发者来说，这无疑是一个值得尝试的工具。