---
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="/zh-Hant/docs/antigravity/official/03-browser-artifacts/00-artifacts-review" />
  <Card title="MCP、許可權與安全" description="繼續學習 browser allowlist、file access、terminal sandbox 和 MCP 許可權。" href="/zh-Hant/docs/antigravity/official/05-mcp-permissions-security" />
</Cards>
