AI 代理瀏覽器控制 — 誰能看到你的 localhost？

每個 AI 程式碼代理都有同一個盲點：它寫前端程式碼，卻看不到瀏覽器渲染的結果。人類變成了中繼站——截圖、複製錯誤、貼回去。這正是 HOTL 架構要消除的「人在中間」模式。

本文比較截至 2026 年 3 月，五個主要平台如何解決（或未能解決）這個問題。

問題所在

代理寫程式碼 → 人類開瀏覽器 → 人類截圖 → 人類貼回去
     ↑                                              |
     └──────────────────── 浪費的循環 ───────────────┘

我們想要的是：

代理寫程式碼 → 代理導航 localhost → 代理截圖 → 代理自行修復

五個平台比較

1. Antigravity IDE — 黃金標準

Google 的 Agentic IDE 擁有最完整的瀏覽器整合。代理可啟動 localhost、導航頁面、點擊元素、讀取 console 輸出並截圖——全部內建，零設定。

關鍵差異點：Artifacts 系統。每張截圖和瀏覽器錄影都成為可驗證的交付物。Manager 視圖讓你看到代理實際看到的內容，而不只是它寫了什麼。

內建瀏覽器子代理，支援點擊、捲動、輸入、DOM 擷取、影片錄製
自動視覺回歸偵測（修改前後截圖對比）
公開預覽免費，支援 Gemini 3 Pro + Claude Sonnet 4.5

2. Claude Code CLI — 兩條路徑

路徑 A：/chrome beta — 安裝「Claude in Chrome」擴充套件，代理即可直接控制瀏覽器。方便，但有限制：只支援同一台機器、JS 對話框會阻塞代理、不支援 Brave/Arc。

路徑 B：chrome-devtools-mcp — 適用於所有平台的通用 MCP server。26 個工具，涵蓋導航、輸入、模擬、效能、網路、除錯。--isolated 模式以臨時 profile 執行全新的 Chrome 實例。

對大多數開發者來說，路徑 B 更可靠。路徑 A 在可用時更方便。

3. Codex CLI/App — 僅 MCP

OpenAI 的 Codex 沒有內建瀏覽器功能，完全依賴 MCP server（Playwright 或 Chrome DevTools）。沙盒環境預設限制網路存取——你必須明確允許 localhost 連線。

已知問題：GitHub issues 有回報 Playwright MCP 連線逾時。在 CLI 中比在 VS Code 擴充中效果更好。

4. Gemini CLI — 實驗性瀏覽器代理

自 v0.31.0（2026 年 2 月 27 日）起，Gemini CLI 有個實驗性的瀏覽器子代理，使用 accessibility tree + 視覺模型進行基於座標的點擊。這是一個新穎的方式——代理透過 accessibility 標籤和 Gemini 視覺模型分析的截圖來「看見」頁面。

免費且 API 限制慷慨。每週發布代表 API 可能有所變動。

5. Chrome DevTools MCP — 通用橋接

這不是一個平台，而是讓所有平台都能運作的工具。Google 的官方 MCP server 透過 CDP（Chrome DevTools Protocol）將任何 AI 代理連接到 Chrome。

事實	數值
Node.js 需求	20.19+（某些文件誤稱 22+）
Chrome 需求	146+ Stable（2026-03-10 發布）
工具數量	26 個（導航、輸入、模擬、效能、網路、除錯）
支援的代理	Claude Code、Claude Desktop、Gemini CLI、Cursor、Copilot、Codex
Mac + Windows	兩者皆支援

在 Claude Code 安裝：

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

生產環境請務必使用 --isolated 模式——它會建立一個關閉後自動刪除的臨時 Chrome profile。

比較矩陣

功能	Claude Code	Codex	Gemini CLI	Antigravity
內建瀏覽器	Beta	無	實驗性	完整
MCP 支援	是	是	是	是
看到 localhost	是	是（需允許）	是	是
自動截圖	是	是	是	自動 + artifacts
Console 錯誤	是	透過 MCP	透過 MCP	內建
Mac + Windows	兩者	兩者	兩者	兩者
免費	否	有限	是	是（預覽）

這對開發團隊意味著什麼

如果你用 Claude Code（像我們一樣）：安裝 chrome-devtools-mcp。這是最成熟、最通用的選項。一次安裝，到處都能用。

如果你剛開始：試試 Antigravity IDE。它的瀏覽器整合領先一個世代。光是 Artifacts 系統就能改變你驗證前端工作的方式。

如果你在意成本：Gemini CLI 免費且每週都在改善。實驗性瀏覽器代理雖然粗糙，但功能可用。

普遍真理：chrome-devtools-mcp server 是最後的安全網。無論你用哪個平台，它都提供 MCP 中最深入的 DevTools 整合。

安全邊界

瀏覽器控制強大但危險。我們的規則：

務必使用 --isolated 模式——絕不連接到個人 Chrome profile
絕不瀏覽金融網站（銀行、交易平台）
絕不存取非開發網站的 cookies/localStorage
完成後關閉除錯埠
停用 Google 遙測：--no-performance-crux --no-usage-statistics

代理強化開發工作流程，不碰個人金融流程。

也參考 AI Agent Orchestration Tools Comparison，了解更廣泛的編排工具全景。