在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系统：

bash 复制代码

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run

Windows系统：

bash 复制代码

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

Linux系统：

bash 复制代码

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

总结

Roo Code的浏览器自动化功能为开发者提供了一个高度集成的工作环境，极大地提升了开发效率。无论是进行简单的页面检查，还是复杂的交互测试，都可以在熟悉的VS Code界面中完成，真正实现了"开发不离IDE"的流畅体验。对于追求效率的现代开发者来说，这无疑是一个值得尝试的工具。