---
title: "Browser Subagent 与视觉证据"
description: "基于官方 Browser、Browser Subagent、Screenshots 和 Browser Recordings 文档，解释 Antigravity 浏览器验证、独立 Chrome profile 和证据审查边界。"
verifiedAt: "2026-05-06"
---

Antigravity 可以打开、读取并控制 Chrome 浏览器。官方 Browser 文档说明，它可以测试开发网站、读取互联网数据源，并自动化各种浏览器任务；当主 agent 需要浏览器交互时，会调用 Browser Subagent。

这对前端和 Web 产品很关键：代码改完不等于页面真的可用，Browser Subagent 可以留下 screenshot、recording 和 walkthrough 作为视觉证据。

> [!NOTE]
> **阅读目标**：读完本章，你应该能让 Browser Subagent 做本地 UI 验证，并知道为什么真实账号和外部后台必须先设边界。

## 1. Browser Subagent 是单独的子代理

官方 Browser Subagent 文档说明，当 agent 想和浏览器交互时，会调用 browser subagent。这个 subagent 使用专门操作打开页面的模型，和你给 main agent 选择的模型不同。

它可以使用这些工具：

| 能力 | 用途 |
| --- | --- |
| click / scroll / type | 操作页面 |
| read console logs | 排查前端运行问题 |
| DOM capture | 读取页面结构 |
| screenshots | 截取页面或元素状态 |
| markdown parsing | 把页面内容转成可读文本 |
| videos / recordings | 记录浏览器动作 |

```mermaid
flowchart TD
  Main["Main Agent"] --> Need{"需要浏览器交互"}
  Need -->|是| BrowserSub["Browser Subagent"]
  BrowserSub --> DOM["DOM / markdown / console"]
  BrowserSub --> Action["click / scroll / type"]
  BrowserSub --> Screenshot["Screenshot Artifact"]
  BrowserSub --> Recording["Browser Recording Artifact"]
  Screenshot --> Review["用户评论和审查"]
  Recording --> Review
```

## 2. 它会接管页面，但不接管你的普通浏览器

官方 Browser 文档说明，为了把 Antigravity agent 和用户正常浏览隔离开，它运行在 separate browser profile。这个 profile 会显示成 dock 里的独立应用，并且默认没有登录任何账号。

这点很重要：

- 它不是你的日常 Chrome profile。
- 它默认没有你的登录态。
- 它需要检测到本机 Chrome。
- 如果检测不到 Chrome，需要在设置里指定 Chrome binary path。
- 可以在 Settings 的 Browser 区域关闭 browser tools。

> [!IMPORTANT]
> 不要把“它能打开 Chrome”理解成“它会沿用我的登录后台”。官方设计就是 separate profile，用来降低对日常浏览和账号状态的耦合。

## 3. 页面被控制时你不要手动干预

官方 Browser Subagent 文档说明，当 agent 正在控制页面时，页面上会显示蓝色边框 overlay 和一个小面板，描述正在执行的动作。此时你不能和页面交互，以免 agent 被你的动作干扰。

实操建议：

1. 让 agent 自己完成这一轮浏览器动作。
2. 不要同时手点页面。
3. 如果发现它走错路径，停止任务或在 artifact 上评论。
4. 让它重新按明确路径执行。

## 4. Screenshot 适合审视觉状态

官方 Screenshots 文档说明，browser subagent 可以在需要你 review 页面状态时截取 open pages 或页面元素，也可以由你 prompt agent 截图。所有截图会保存为 image artifacts，并且可以评论反馈。

适合截图的场景：

| 场景 | 你要看什么 |
| --- | --- |
| 首页布局 | 首屏是否完整、内容是否遮挡 |
| 移动端断点 | 导航、按钮、卡片是否溢出 |
| 表单状态 | 错误提示、disabled、loading 是否清楚 |
| 图表或仪表盘 | 数据是否可读、标签是否重叠 |
| 主题切换 | 明暗模式颜色和对比度是否正常 |

示例 prompt：

```text
请打开 localhost 页面，只做视觉检查。
分别截取 390px、768px、1440px 宽度的首页和当前教程页。
不要登录任何外部账号，不要访问生产后台。
```

## 5. Browser Recording 适合审用户路径

官方 Browser Recordings 文档说明，每当 browser subagent 操作 Browser 时，它可以生成动作 recording，供用户在 Browser step UI 底部查看；recording 也会保存成 artifact。

Recording 比 screenshot 更适合验证流程：

- 打开页面。
- 搜索教程。
- 切换章节。
- 展开 details。
- 点击下一页卡片。
- 检查 mobile menu。

> [!TIP]
> 静态页面看 screenshot，交互路径看 recording。不要用一张截图代替完整用户路径。

<details>
<summary>深读：Browser 能力为什么必须配合 allowlist</summary>

浏览器页面本身可能包含 prompt injection。未知网页可以在页面内容中诱导 agent 访问无关 URL、读取文件、执行命令或泄露信息。官方 Browser 文档强调 Antigravity 可以读取互联网数据源和自动化浏览器任务，这也意味着风险面比纯文件编辑更大。

真实项目里，先允许 `localhost` 和必要官方文档域名。涉及 GitHub、Cloud Console、CMS、支付后台、广告后台时，默认只读或人工操作，等浏览器 URL allowlist 和权限策略明确后再让 agent 点击。
</details>

## 6. 前端任务最低证据标准

让 Browser Subagent 做前端任务时，至少要求：

1. 明确 URL 范围，例如只允许 `localhost`。
2. 明确 viewport，例如 390、768、1440。
3. 要求 screenshot 证明布局。
4. 要求 recording 或 walkthrough 证明交互路径。
5. 要求 console log 检查。
6. 最后回到 code diff 和 build 验收。

## 本章自检

完成本章后，用这 3 个问题检查自己是否真正理解：

1. Browser Subagent 和 main agent 为什么可能不是同一个模型？
2. Separate Chrome profile 对账号和登录态意味着什么？
3. Screenshot 和 Browser Recording 分别适合验证什么？

通过标准：你能写出一条只允许访问 `localhost` 的浏览器验收 prompt，并要求截图、录屏、console 和 diff 四类证据。

## 官方来源

- [Google Antigravity Browser](https://antigravity.google/docs/browser) —— 官方说明 Chrome 浏览器控制、separate profile、browser tools 设置和 Chrome binary path。
- [Google Antigravity Browser Subagent](https://antigravity.google/docs/browser-subagent) —— 官方说明 browser subagent 的模型、工具、overlay 和后台 tab 行为。
- [Google Antigravity Screenshots](https://antigravity.google/docs/screenshots) —— 官方说明截图作为 image artifacts，并支持评论反馈。
- [Google Antigravity Browser Recordings](https://antigravity.google/docs/browser-recordings) —— 官方说明浏览器动作录屏和 recording artifact。

## 接下来去哪

<Cards>
  <Card title="Artifacts 与审查反馈" description="回到 Task List、Implementation Plan、Walkthrough 和 Knowledge 的审查流程。" href="/docs/antigravity/official/03-browser-artifacts/00-artifacts-review" />
  <Card title="MCP、权限与安全" description="继续学习 browser allowlist、file access、terminal sandbox 和 MCP 权限。" href="/docs/antigravity/official/05-mcp-permissions-security" />
</Cards>
