OpenClaw (前稱Clawdbot / Moltbot) Browser：AI 代理的視覺智能核心
OpenClaw Browser 是整個系統中最具顛覆性的組件之一，它讓 AI 代理真正具備了「看見並操作」網頁的能力。透過專屬的瀏覽器控制服務，代理可以開啟分頁、閱讀內容、點擊按鈕、填寫表單，甚至生成 PDF 報表，完全模擬人類使用瀏覽器的行為。這不僅是技術展示，更是將 AI 從純文字推理提升到圖形化操作的關鍵轉捩點。
雙軌瀏覽器架構：隔離與共存並存
OpenClaw 提供兩種完全獨立的瀏覽器控制模式，滿足不同安全與使用需求：
管理式瀏覽器（openclaw profile）
這是預設推薦方案，OpenClaw 會啟動一個完全隔離的 Chromium 實例：
-
專屬使用者資料目錄，與個人瀏覽器零交互
-
預設橘色主題，視覺上立即辨識
-
自動分配 CDP 埠（18800-18899），避免衝突
-
支援多配置檔（openclaw、工作、遠端等）
擴充功能中繼（chrome profile）
利用現有 Chrome 標籤頁，透過本地 CDP 中繼器控制：
-
需要安裝 OpenClaw Browser Relay 擴充功能
-
點擊擴充圖示啟動控制模式（顯示 ON 狀態）
-
適合快速測試，不啟動額外程序
兩種模式可隨時切換，透過 browser.defaultProfile 配置決定預設行為。
快速啟動：三分鐘上手的 CLI 指令
狀態檢查與啟動：
openclaw browser status
openclaw browser start
openclaw browser stop
基本分頁操作：
openclaw browser tabs (列出所有分頁)
openclaw browser open https://example.com (開新分頁)
openclaw browser tab select 2 (切換至第 2 個分頁)
openclaw browser tab close 2 (關閉分頁)
如果顯示「Browser disabled」，執行以下指令啟用：
openclaw config set browser.enabled true
openclaw gateway restart
核心配置：精準控制每個細節
Browser 設定位於 ~/.openclaw/openclaw.json，提供企業級的控制粒度：
基礎配置範例：
browser: {
enabled: true,
defaultProfile: "openclaw", // 或 "chrome"
headless: false, // 顯示視窗模式
noSandbox: false, // Linux 沙箱模式
remoteCdpTimeoutMs: 1500, // 遠端連線超時
profiles: {
openclaw: { cdpPort: 18800, color: "#FF4500" },
work: { cdpPort: 18801, color: "#0066CC" },
remote: { cdpUrl: "http://10.0.0.42:9222" }
}
}
關鍵參數說明：
-
color：配置檔專屬色彩標記 -
attachOnly: true：僅附加現有瀏覽器，不自動啟動 -
executablePath：指定 Brave/Edge 等替代瀏覽器
強大的 Snapshot 系統：AI 的「眼睛」
Snapshot 是 Browser 控制的智慧核心，代理透過它「看見」頁面並獲取操作座標：
AI Snapshot（數值參照）
openclaw browser snapshot
生成含數字參照的文字快照（12、23 等），代理用於點擊、輸入：
openclaw browser click 12 (點擊元素 12)
openclaw browser type 23 "hello" (在元素 23 輸入)
角色快照（角色參照）
openclaw browser snapshot --interactive
生成互動元素清單，標記如 [ref=e12]，適合複雜操作：
openclaw browser click e12 (點擊按鈕 e12)
openclaw browser highlight e12 (高亮顯示確認)
高階快照選項
--compact (壓縮模式，減少 token)
--depth 6 (DOM 樹深度限制)
--selector "#main" (指定容器範圍)
--frame "iframe" (iframe 內快照)
--labels (生成標註截圖)
完整動作 API：人類級操作能力
導航與視窗控制：
openclaw browser navigate https://example.com
openclaw browser resize 1280 720
openclaw browser pdf (生成 PDF)
互動操作：
openclaw browser click 12 --double (雙擊)
openclaw browser type 23 "搜尋關鍵字" --submit
openclaw browser drag 10 11 (拖拽)
openclaw browser hover 44 (滑鼠懸停)
等待機制：
openclaw browser wait "#main" --url "**/dashboard" --load networkidle
openclaw browser wait --fn "window.ready===true" --timeout 15000
進階調試工具：開發者的利器
即時監控：
openclaw browser console --level error (錯誤日誌)
openclaw browser errors --clear (清除錯誤)
openclaw browser requests --filter api (網路請求追蹤)
效能追蹤：
openclaw browser trace start
# 複製操作步驟
openclaw browser trace stop (生成追蹤檔案)
視覺驗證：
openclaw browser screenshot --full-page
openclaw browser screenshot --ref e12 (元素截圖)
多配置檔管理：場景化部署
支援無限配置檔，適用不同工作場景：
開發配置檔：
profiles: {
"development": { cdpPort: 18800, color: "#FF6B35" },
"staging": { cdpPort: 18801, color: "#F7931E" },
"production": { cdpUrl: "https://chrome.company.com:9222" }
}
企業場景切換：
openclaw browser --browser-profile production status
openclaw browser --browser-profile production open https://intranet
遠端控制方案：跨設備協作
Node 主機代理（零配置）
在有瀏覽器的機器運行節點主機，閘道器自動代理：
節點端：nodeHost.browserProxy.enabled=true
閘道器端：gateway.nodes.browser.mode="auto"
Browserless 雲端 CDP
直接指向商業 CDP 服務：
profiles: {
"browserless": {
cdpUrl: "https://production-sfo.browserless.io?token=xxx",
color: "#00AA00"
}
}
自架遠端 CDP
profiles: {
"team-server": {
cdpUrl: "http://10.0.0.42:9222",
color: "#0066CC"
}
}
狀態與環境控制：精確模擬
Cookie 管理：
openclaw browser cookies
openclaw browser cookies set session abc123 --url "https://app.com"
儲存管理：
openclaw browser storage local get
openclaw browser storage local set theme dark
網路模擬：
openclaw browser set offline on
openclaw browser set headers --json '{"X-Debug":"1"}'
地理定位：
openclaw browser set geo 25.0330 121.5654 --origin "https://maps.com"
設備模擬：
openclaw browser set device "iPhone 14"
JSON 結構化輸出：程式化整合
所有指令支援 --json 參數，適合自動化腳本：
openclaw browser snapshot --interactive --json
openclaw browser tabs --json
openclaw browser requests --filter api --json
輸出包含 refs、stats（行數、字元數、互動元素數），方便工具分析 payload 密度。
代理工具整合：單一強大 interface
AI 代理透過單一 browser 工具實現全棧控制：
參數說明：
profile: "openclaw"|"chrome"|"remote"
target: "sandbox"|"host"|"node"
action: "snapshot"|"act"|"screenshot"|"navigate"
沙箱會話預設 target="sandbox"，非沙箱預設 target="host"，節點自動路由。
安全設計：企業級隔離保障
隔離保證：
✓ 專屬使用者資料目錄，絕不碰觸個人配置檔
✓ 獨立 CDP 埠，避免開發工作流衝突
✓ Loopback-only 控制平面，外部無法存取
✓ Tailscale 私網部署建議
✓ 環境變數優先，配置文件最小化憑證暴露
常見應用場景
電子商務自動化
流程：搜尋商品 → 比價 → 加入購物車 → 優惠碼 → 結帳
指令：snapshot → click[加入購物車] → type[優惠碼] → click[結帳]
資料擷取管道
流程：登入 → 導航 → snapshot → extract → PDF → 下載
驗證：screenshot → requests 網路監控 → trace 效能分析
表單自動填寫
批量操作：填寫多筆資料 → 提交 → 驗證成功 → 下一筆
容錯：wait 狀態確認 → retry 失敗重試 → notify 異常通知
效能與限制
資源需求：
✓ Playwright 全功能：300MB 磁碟，1GB RAM
✓ 基本 CDP：100MB 磁碟，512MB RAM
✓ 同時三個配置檔：2GB RAM
已知限制：
✗ 無 CSS 選擇器直接操作（依賴 snapshot refs）
✗ 角色參照跨導航不穩定（需重新 snapshot）
✗ 極端反爬蟲網站可能觸發驗證
未來發展方向
規劃功能：
- 原生多分頁並行控制
- 視覺元素辨識（無需快照）
- 影片串流與即時操作
- WebAssembly 瀏覽器實例
- 跨瀏覽器引擎支援（Firefox、Safari）
結語：從「看不懂」到「完全控制」
OpenClaw(前稱Clawdbot / Moltbot) Browser 將 AI 代理從純文字世界解放出來，讓它真正理解並操作圖形化網頁介面。這不僅是技術突破，更是使用範式的根本改變——代理不再被動等待指令描述，而是能主動觀察環境、理解介面、執行複雜工作流。
透過 openclaw browser snapshot --interactive，親眼見證 AI 如何將混亂的網頁轉化為結構化的操作地圖。這就是 OpenClaw Browser 的魔力：讓 AI 不僅會思考，更會行動。