开启实验性功能：需要在设置中启用 workbench.browser.enableChatTools。如何启用？
- 打开设置
- 搜索 workbench.browser.enableChatTools。
- 勾选该选项
- 或者直接在 settings.json 中添加：json { "workbench.browser.enableChatTools": true }

⚙️ 浏览器智能体是如何工作的？

一旦启用，智能体就获得了一套强大的“浏览器操控工具箱”，包括：

工具类别	具体工具	作用
页面导航	openBrowserPage, navigatePage	打开新页面或跳转链接
内容与外观	readPage, screenshotPage	读取页面文本结构或截图分析
用户交互	clickElement, hoverElement, dragElement, typeInPage, handleDialog	模拟点击、悬停、拖拽、输入、处理弹窗
高级自动化	runPlaywrightCode	运行自定义 Playwright 脚本进行复杂操作

🎬 实战演练

让我们用一个例子，一步步看智能体如何从零构建一个计算器，并自己发现并修复 Bug。

第一步：让智能体构建计算器

在 VS Code 中新建一个文件夹作为项目目录，并打开它。
在 Chat 视图中，输入以下提示词：创建一个计算器，包含 0-9 数字键、加减乘除运算键、清除键和等于键。使用 HTML, CSS, JS 编写，并采用简洁现代的设计风格
开始生成代码，创建 index.html, styles.css, script.js 文件。
预览生成的文件后，点击 Keep 将它们保存到你的工作区。

第二步：让智能体测试计算器

现在，考验它的时候到了！让它自己去浏览器里测试这个计算器。

在 Chat 视图中输入：在浏览器中打开计算器，并测试所有运算是否正常工作
见证奇迹的时刻：
- 智能体自动在 VS Code 内置浏览器 中打开 index.html。
- 它解析页面结构，识别出各个按钮。
- 它开始系统地模拟点击：先按 5，再按 +，再按 3，最后按 =，然后检查结果是否为 8。
- 它会遍历加法、减法、乘法、除法等所有操作。
- 最后，它会向你汇报测试结果：“加法正常，减法正常... 除法发现一个问题！”

第四步：观看智能体调试并修复 Bug

如果测试中发现了 Bug，智能体会自动进入“侦探模式”分析原因并修复。

我们来故意制造一个 Bug： 假设我们在代码中移除了“除以零”的检查逻辑：

functioncalculate(){

if(!operator || shouldReset)return;



const a =parseFloat(previous);

const b =parseFloat(current);

let result;



switch(operator){

case'+': result = a + b;break;

case'-': result = a - b;break;

case'*': result = a * b;break;

case'/': result = a / b;break;// ⚠️ 缺少对 b === 0 的检查！

}

// ... 后续代码

}

再次命令智能体：

提示词：验证除法运算是否正确。如果发现任何问题，请修复它们。

接下来会发生什么？

智能体执行 10 / 0。
浏览器控制台抛出 Infinity 或错误。
智能体捕获到这个异常。分析代码开始解决
它自动修改 script.js，添加 if (b === 0) { alert("Cannot divide by zero"); return; }。
它重新加载页面，再次测试 10 / 0，确认问题已解决。
向你报告：“已发现并修复除以零的 Bug。”

🎉 完成！ 智能体独立完成了一个完整的开发循环：构建 -> 测试 -> 调试 -> 修复！

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-03-08，如有侵权请联系 cloudcommunity@tencent.com 删除

测试