AI 程式設計教程中文版
官方教程中文版03 · Browser & Artifacts

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 被你的動作干擾。

實操建議:

  1. 讓 agent 自己完成這一輪瀏覽器動作。
  2. 不要同時手點頁面。
  3. 如果發現它走錯路徑,停止任務或在 artifact 上評論。
  4. 讓它重新按明確路徑執行。

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 做前端任務時,至少要求:

  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 四類證據。

官方來源

接下來去哪

本頁目錄