前言：还在手动打开浏览器、点击按钮、检查控制台报错？太累了！现在，VS Code 的 Browser Agent（浏览器智能体） 可以帮你全自动完成“写代码 -> 打开浏览器 -> 交互测试 -> 发现 Bug -> 自动修复”的闭环。就像雇了一个不知疲倦的测试工程师，24 小时待命！🤖✨

---

🚀 什么是浏览器智能体工具？

浏览器智能体工具 (Browser Agent Tools) 让 AI 能够在一个封闭的开发循环中，自主地构建和验证 Web 应用。

它能做什么？

• 📝 写代码：生成 HTML, CSS, JavaScript。
• 🌍 开浏览器：在 VS Code 内置浏览器中打开应用。
• 👆 交互测试：模拟点击、输入、拖拽等操作。
• 🔍 发现问题：通过控制台错误和视觉检查识别 Bug。
• 🛠️ 自动修复：无需人工干预，直接修改代码并重新验证。

---

📋 前置要求 (Prerequisites)

在开始之前，请确保你准备好了以下“三件套”：

1. Visual Studio Code：已安装在你的电脑上。

2. GitHub Copilot 订阅：有效的付费或试用订阅。

3. 开启实验性功能：
   需要在设置中启用 workbench.browser.enableChatTools。

   如何启用？

   • 打开设置 (Ctrl+, / Cmd+,)。
   • 搜索 workbench.browser.enableChatTools。
   • 勾选该选项。
   • 或者直接在 settings.json 中添加：

     {
       "workbench.browser.enableChatTools": true
     }
     

---

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

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

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

🔒 隐私与安全：默认情况下，智能体打开的页面运行在私有、内存中的会话里。它们不共享你其他浏览器标签页的 Cookie 或存储数据。这让你能完全控制智能体能访问哪些浏览数据。

---

🎬 实战演练：打造并测试一个计算器

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

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

1. 在 VS Code 中新建一个文件夹作为项目目录，并打开它。

2. 在 Chat 视图中，输入以下提示词 (Prompt)：

   创建一个计算器，包含 0-9 数字键、加减乘除运算键、清除键和等于键。使用 HTML, CSS, JS 编写，并采用简洁现代的设计风格
   

3. 智能体会开始生成代码，创建 index.html, styles.css, script.js 文件。

4. 预览生成的文件后，点击 Keep 将它们保存到你的工作区。

---

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

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

1. 在 Chat 视图中输入：

   在浏览器中打开计算器，并测试所有运算是否正常工作
   

2. 见证奇迹的时刻：

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

---

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

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

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

function calculate() {
    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 的检查！
    }
    // ... 后续代码
}

再次命令智能体：

Verify the division operation works correctly. If you find any issues, fix them.

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

接下来会发生什么？

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

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

---

🎯 总结

特性	描述
自动化闭环	从代码生成到测试修复，全流程无人值守
强大工具集	导航、读取、截图、点击、输入、运行脚本
安全隔离	默认会话隔离，保护用户隐私数据
灵活共享	可选择性共享特定页面给智能体分析
实验阶段	功能仍在迭代，未来会有更多惊喜