Visual Studio Code 1.127 的重点不是又多了几个按钮，而是把 AI Agent 的工作边界往真实浏览器推进了一步。新版中的 Browser tools for agents 已全面上线，Agent 可以打开页面、截图、点击，并用这些操作验证自己刚改过的 Web 应用。同时，按站点管理浏览器权限也让摄像头、位置、设备等敏感能力不再是“一放全放”。
Agent 不只会改代码，也能看见页面
过去让 Agent 修改前端代码时，最薄弱的一环往往是验证：它能读文件、改组件、跑测试，但页面是否真的渲染正常、按钮是否能点、弹窗是否挡住内容，仍然需要开发者切回浏览器确认。
VS Code 1.127 的 Browser tools for agents 把这一步放进了 Agent 工作流。根据发布摘要，这类工具允许 Agent：
- 打开 Web 页面
- 截取页面截图
- 点击页面元素
- 用浏览器行为验证自己的改动
这对前端和全栈开发都很实用。比如修复一个登录页布局，Agent 不应只说“CSS 已修改”，它还应该能打开本地页面，看按钮是否可见，点击后是否进入下一步。这里的变化是：验证从“代码层面推断”变成了“浏览器层面观察”。
要注意边界：这不等于 Agent 自动理解所有业务正确性。它能发现明显的渲染、交互、导航问题，但复杂支付流程、权限矩阵、数据一致性仍然需要测试用例和人工评审兜底。
单站点权限：把浏览器能力收回到具体页面
另一个值得关注的改动是 Per-site browser permissions。摘要里提到，新版允许页面访问摄像头、位置、设备等能力时，按站点管理权限。
这对 Agent 场景尤其重要。Agent 能打开网页后，如果测试的是地图、视频会议、扫码、WebUSB 或设备控制类应用，浏览器权限就成了必经路径。按站点授权比全局授权更安全，也更符合开发环境里的最小权限原则。
可以这样理解这个能力的工程价值：
- 测试
localhost:5173的摄像头页面，不必影响其他站点 - 对不同本地服务分别授权，减少误用敏感设备的风险
- Agent 在浏览器里操作时，权限边界更清晰
这不是让开发者放松安全审查，而是把权限粒度从“整个浏览器环境”压到“当前站点”。对于经常同时跑多个前端服务的团队，这个粒度很关键。
可以这样实践：给 Agent 一个可验证的前端任务
下面是一个可以本地跑起来的小例子。它不是 VS Code 内置 API 示例，而是一个适合配合 Browser tools for agents 使用的最小前端项目：页面有一个按钮，点击后改变状态。Agent 修改代码后，可以打开页面、点击按钮、截图确认结果。
创建项目：
mkdir vscode-agent-browser-demo
cd vscode-agent-browser-demo
npm create vite@latest . -- --template vanilla
npm install
npm run dev
把 src/main.js 改成下面这样：
import './style.css'
const app = document.querySelector('#app')
app.innerHTML = `
<main class="panel">
<h1>Agent Browser Check</h1>
<p id="status">Waiting for browser action</p>
<button id="confirm-button">Confirm</button>
</main>
`
const status = document.querySelector('#status')
const button = document.querySelector('#confirm-button')
button.addEventListener('click', () => {
status.textContent = 'Confirmed in the browser'
button.disabled = true
})
把 src/style.css 改成下面这样：
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
display: grid;
place-items: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f6f7f9;
color: #1f2328;
}
.panel {
width: min(420px, calc(100vw - 32px));
padding: 24px;
border: 1px solid #d8dee4;
border-radius: 8px;
background: white;
}
button {
height: 40px;
padding: 0 16px;
border: 0;
border-radius: 6px;
background: #0969da;
color: white;
font-weight: 600;
cursor: pointer;
}
button:disabled {
background: #8c959f;
cursor: default;
}
在 VS Code 里可以给 Agent 一个明确任务，例如：
打开本地页面 http://localhost:5173。
检查页面中是否存在 Confirm 按钮。
点击按钮后确认状态文本变为 "Confirmed in the browser"。
如果页面布局或交互不符合预期，请修改代码并再次用浏览器验证。
这个提示词的关键是把“完成”的定义写成可观察行为，而不是只让 Agent “优化页面”。Agent 有浏览器工具后，任务应该从“改一改”升级为“改完并验证”。
忙碌的代理会话也需要管理
摘要还提到，VS Code 1.127 增加了管理繁忙代理会话的新方法。这个方向很现实：当 Agent 能读代码、改文件、跑命令、开浏览器之后，一次会话可能持续更久，也更容易堆积上下文和操作。
团队采用这类能力时，建议把 Agent 会话当成一种开发资源来管理：
- 给每个任务设置清晰终点，例如“截图确认按钮可点击”
- 避免一个会话同时处理 UI、接口、数据库迁移等多个方向
- 要求 Agent 在关键修改后运行测试或浏览器验证
- 对涉及摄像头、位置、设备的页面，只授予当前站点需要的权限
- 保留人工 review，尤其是权限、认证、支付、数据删除等高风险路径
升级建议：从低风险页面开始
VS Code 1.127 的这些变化最适合先落在前端反馈链路短、风险低的任务上：修复样式错位、补齐空状态、验证表单交互、检查按钮流程。Browser tools for agents 能减少“看起来应该可以”的猜测，让 Agent 用真实页面给出证据。
但它不是端到端测试体系的替代品。更稳妥的做法是：让 Agent 做浏览器级快速验证，让 Playwright、单元测试和代码评审继续承担可重复、可追溯的质量门禁。这样升级 VS Code 1.127 才不只是尝鲜，而是把 AI 辅助开发接进现有工程纪律里。