Browser Subagent 與視覺證據
基於官方 Browser、Browser Subagent、Screenshots 和 Browser Recordings 文件,解釋 Antigravity 瀏覽器驗證、獨立 Chrome profile 和證據審查邊界。
Antigravity 可以開啟、讀取並控制 Chrome 瀏覽器。官方 Browser 文件說明,它可以測試開發網站、讀取網際網路資料來源,並自動化各種瀏覽器任務;當主 agent 需要瀏覽器互動時,會呼叫 Browser Subagent。
這對前端和 Web 產品很關鍵:程式碼改完不等於頁面真的可用,Browser Subagent 可以留下 screenshot、recording 和 walkthrough 作為視覺證據。
閱讀目標:讀完本章,你應該能讓 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 | 記錄瀏覽器動作 |
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。
不要把“它能開啟 Chrome”理解成“它會沿用我的登入後臺”。官方設計就是 separate profile,用來降低對日常瀏覽和賬號狀態的耦合。
3. 頁面被控制時你不要手動干預
官方 Browser Subagent 文件說明,當 agent 正在控制頁面時,頁面上會顯示藍色邊框 overlay 和一個小面板,描述正在執行的動作。此時你不能和頁面互動,以免 agent 被你的動作干擾。
實操建議:
- 讓 agent 自己完成這一輪瀏覽器動作。
- 不要同時手點頁面。
- 如果發現它走錯路徑,停止任務或在 artifact 上評論。
- 讓它重新按明確路徑執行。
4. Screenshot 適合審視覺狀態
官方 Screenshots 文件說明,browser subagent 可以在需要你 review 頁面狀態時擷取 open pages 或頁面元素,也可以由你 prompt agent 截圖。所有截圖會儲存為 image artifacts,並且可以評論反饋。
適合截圖的場景:
| 場景 | 你要看什麼 |
|---|---|
| 首頁佈局 | 首屏是否完整、內容是否遮擋 |
| 移動端斷點 | 導航、按鈕、卡片是否溢位 |
| 表單狀態 | 錯誤提示、disabled、loading 是否清楚 |
| 圖表或儀表盤 | 資料是否可讀、標籤是否重疊 |
| 主題切換 | 明暗模式顏色和對比度是否正常 |
示例 prompt:
请打开 localhost 页面,只做视觉检查。
分别截取 390px、768px、1440px 宽度的首页和当前教程页。
不要登录任何外部账号,不要访问生产后台。5. Browser Recording 適合審使用者路徑
官方 Browser Recordings 文件說明,每當 browser subagent 操作 Browser 時,它可以生成動作 recording,供使用者在 Browser step UI 底部檢視;recording 也會儲存成 artifact。
Recording 比 screenshot 更適合驗證流程:
- 開啟頁面。
- 搜尋教程。
- 切換章節。
- 展開 details。
- 點選下一頁卡片。
- 檢查 mobile menu。
靜態頁面看 screenshot,互動路徑看 recording。不要用一張截圖代替完整使用者路徑。
深讀:Browser 能力為什麼必須配合 allowlist
瀏覽器頁面本身可能包含 prompt injection。未知網頁可以在頁面內容中誘導 agent 訪問無關 URL、讀取檔案、執行命令或洩露資訊。官方 Browser 文件強調 Antigravity 可以讀取網際網路資料來源和自動化瀏覽器任務,這也意味著風險面比純檔案編輯更大。
真實專案裡,先允許 localhost 和必要官方文件域名。涉及 GitHub、Cloud Console、CMS、支付後臺、廣告後臺時,預設只讀或人工操作,等瀏覽器 URL allowlist 和許可權策略明確後再讓 agent 點選。
6. 前端任務最低證據標準
讓 Browser Subagent 做前端任務時,至少要求:
- 明確 URL 範圍,例如只允許
localhost。 - 明確 viewport,例如 390、768、1440。
- 要求 screenshot 證明佈局。
- 要求 recording 或 walkthrough 證明互動路徑。
- 要求 console log 檢查。
- 最後回到 code diff 和 build 驗收。
本章自檢
完成本章後,用這 3 個問題檢查自己是否真正理解:
- Browser Subagent 和 main agent 為什麼可能不是同一個模型?
- Separate Chrome profile 對賬號和登入態意味著什麼?
- Screenshot 和 Browser Recording 分別適合驗證什麼?
透過標準:你能寫出一條只允許訪問 localhost 的瀏覽器驗收 prompt,並要求截圖、錄屏、console 和 diff 四類證據。
官方來源
- Google Antigravity Browser —— 官方說明 Chrome 瀏覽器控制、separate profile、browser tools 設定和 Chrome binary path。
- Google Antigravity Browser Subagent —— 官方說明 browser subagent 的模型、工具、overlay 和後臺 tab 行為。
- Google Antigravity Screenshots —— 官方說明截圖作為 image artifacts,並支援評論反饋。
- Google Antigravity Browser Recordings —— 官方說明瀏覽器動作錄屏和 recording artifact。