顛覆自動化！OpenClaw 結合 Chrome DevTools MCP 讓 AI 完全接管瀏覽器

OpenClaw（GitHub 星數超過 31.6 萬顆，截至 2026 年 3 月 17 日）整合了 Google 官方的 Chrome DevTools MCP 伺服器，讓 AI agent 可以直接操作你的 Chrome 瀏覽器——讀取頁面、點擊元素、填寫表單、錄製效能追蹤、分析網路請求，全部透過 Chrome DevTools Protocol（CDP）完成。 這代表你的 agent 不再只是「聊天」，而是可以實際執行瀏覽器內的工作流程。

這件事為什麼值得關注？傳統的 AI 網頁操作靠截圖和 UI 辨識，不穩定也慢。OpenClaw 的做法是直接跟瀏覽器引擎溝通，透過 CDP 協定達到毫秒級回應。Google 在 Chrome 144 版加入了 --autoConnect 功能，Chrome 146 更進一步把遠端除錯變成原生選項，一個開關就能讓 MCP 伺服器連上你正在用的瀏覽器。

這篇文章會拆解 OpenClaw 的三種瀏覽器控制模式、Chrome DevTools MCP 的核心能力、實際設定流程，還有我們認為最容易被忽略的安全考量。

兩個專案的背景和交會點

先弄清楚兩個東西各自是什麼。

Chrome DevTools MCP 是 Google ChromeDevTools 團隊維護的官方 MCP 伺服器。它把 Chrome DevTools 的除錯能力包裝成 MCP 介面，讓 AI coding assistant（Claude Code、Gemini CLI、Cursor、Copilot 等）可以程式化地控制 Chrome。底層用 Puppeteer 操作，支援效能追蹤、網路請求分析、console 訊息讀取、DOM 快照、截圖。安裝方式是一行 npx 指令：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

系統需求是 Node.js v20.19 以上（建議 22+）加上 Chrome 穩定版。

OpenClaw 的故事更戲劇化。Peter Steinberger 在 2025 年 11 月以週末 side project（當時叫 Clawdbot）發布第一版，功能是「發訊息給 AI，讓它真的幫你做事」。2026 年 1 月底爆紅，三天內從 9,000 顆星衝到 60,000 顆，兩週內到 190,000 顆。2026 年 3 月 3 日突破 250,000 顆星，超過 React（React 花了十年才到這個數字）。截至 3 月 17 日，星數已經超過 316,000 顆，超過 1,000 位貢獻者每週提交程式碼。

兩者的交會點是 v2026.3.13-beta.1 版本，OpenClaw 正式支援 Chrome DevTools MCP 的 --autoConnect 流程作為 existing-session 驅動模式。這讓 agent 可以接入你已經登入的 Chrome，直接在你的真實瀏覽器 session 裡操作。

OpenClaw 的三種瀏覽器控制模式

OpenClaw 的瀏覽器控制建立在 CDP（Chrome DevTools Protocol）上，大約 300 個指令涵蓋 Page、Network、DOM、Runtime 等領域。根據使用情境，有三種模式可選：

Managed 模式最安全，因為沒有共享 cookies、沒有共享歷史紀錄、agent 碰不到你的個人瀏覽資料。底層用 Playwright 作為 CDP 控制引擎，但 OpenClaw 的高階抽象讓 AI agent 操作起來更直覺。

Existing Session 模式是這次整合的重點。啟用後，OpenClaw 透過 Chrome DevTools MCP 的 --autoConnect 連上你正在用的 Chrome，可以讀取你的分頁、你的登入狀態、你的 cookies。官方文件明確標註這是「higher-risk」路徑。

設定 Existing Session 的流程：

1. 確認 Chrome 版本 146 以上
2. 在 Chrome 網址列輸入 chrome://inspect/#devices，按下 Enter
3. 開啟「Allow remote debugging from this device」
4. Chrome 會在本地端啟動 DevTools MCP 伺服器，預設在 127.0.0.1:9222
5. 在 OpenClaw config 裡設定 existing-session 驅動模式

設定完成後，在終端機驗證連線：

openclaw browser --browser-profile user status

如果連線成功，你會看到 MCP 連線資訊和偵測到的分頁列表。

Chrome DevTools MCP 的核心能力

Chrome DevTools MCP 不只是「讓 AI 開網頁」。它提供的工具組對應到 DevTools 各個面板的功能：

效能分析。 提供 performance_start_trace 工具，AI agent 可以錄製效能追蹤、分析 LCP、CLS、INP 等 Core Web Vitals 指標，然後給出具體的效能改善建議。Google 工程副總裁 Addy Osmani 在他的部落格文章裡特別強調，這等於把人類開發者用的 Performance panel 程式化地開放給 AI。

網路除錯。 agent 可以分析網路請求、抓出 CORS 問題、檢查 console log 裡的錯誤訊息（帶 source-mapped stack traces）。一個實際場景：agent 發現 localhost:8080 上有幾張圖片沒載入，自動分析 network 面板找出 404 或 CORS 設定問題。

DOM 和 CSS 檢查。 連接到 live page，檢查 DOM 結構和 CSS，對溢出元素等版面問題給出具體修復建議。你在 DevTools 的 Elements panel 選中一個元素，AI agent 可以直接接手調查。

自動化測試。 填寫表單、點擊按鈕、模擬使用者流程。底層用 Puppeteer 確保動態載入的頁面也能正確等待渲染完成。

環境模擬。 可以切換 CPU 節流、網路速度、viewport 尺寸（emulate_cpu、emulate_network、resize_page），測試頁面在 3G 慢速網路或行動裝置條件下的表現。

如果只需要基本的瀏覽器操作，Chrome DevTools MCP 還提供 --slim 模式，減少載入的工具數量：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

OpenClaw + Chrome DevTools MCP 的實際工作流程

結合兩者之後，一個典型的瀏覽器自動化工作流程長這樣：

第一步：agent 偵測目前的瀏覽器狀態。 你叫 agent「幫我看一下目前開了哪些分頁」，agent 透過 existing-session 模式連上 Chrome，列出所有分頁的標題和 URL。

第二步：agent 在目標頁面執行操作。 假設你有一個 GitHub repo 開了幾個 issue，agent 可以逐一點進去，擷取 issue 標題、狀態、指派人等欄位，整理成結構化資料回報給你。

第三步：agent 執行除錯任務。 你發現某個頁面的 LCP 數字很差，叫 agent 跑效能追蹤。agent 用 performance_start_trace 錄製 trace，分析瓶頸，給出「你的首屏圖片沒壓縮，建議換 WebP 格式」這類具體建議。

第四步：agent 驗證修復結果。 你改完程式碼後，agent 重新跑一次 trace，確認 LCP 改善了。

這整個流程可以在 OpenClaw 的 TUI（文字介面）、CLI、或 Web UI 觸發。agent 會宣告瀏覽器已連線、檢查分頁狀態、串流回傳發現的結果。

也可以搭配 Claude Code 使用——在 Claude Code 裡安裝 Chrome DevTools MCP 的 plugin：

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

這樣 Claude Code 的 agent 就能直接控制 Chrome 來驗證它生成的前端程式碼。

安全考量：你必須知道的風險

遠端除錯等於開大門。Chrome DevTools MCP 的 --autoConnect 一旦啟用，連接上來的程式可以存取你的 cookies、儲存的密碼、所有已登入的 session。這個權限比「很大」還要大。

OpenClaw 在安全方面已經有過幾次嚴重事件。2026 年 3 月 2 日，安全研究人員揭露了一個零點擊漏洞（CVE-2026-25253，CVSS 8.8），攻擊者只要讓 OpenClaw agent 造訪一個惡意網頁，就能取得 gateway 的認證 token，進而完全控制整個 agent 實例。多個獨立掃描團隊發現超過 40,000 個暴露在公網上的 OpenClaw 實例，其中 Censys 在一週內追蹤到從 1,000 個增長到 21,000 個。安全研究員 Maor Dayan 驗證了 42,665 個暴露實例中有 5,194 個確認有漏洞，93.4% 存在認證繞過條件。

瀏覽器控制的風險更具體：

Prompt injection 透過瀏覽器內容。 agent 讀取的每個網頁都可能包含隱藏的惡意指令。OpenClaw 官方文件警告：browser act kind=evaluate 和 openclaw browser evaluate 會在頁面上下文中執行任意 JavaScript，prompt injection 可以操控這個行為。如果你不需要 JS 執行功能，用 browser.evaluateEnabled=false 關掉。

Cookie 和 session 外洩。 existing-session 模式共享你的真實瀏覽器 session。如果 agent 被 prompt injection 攻擊導向惡意網站，你在 Gmail、銀行、企業 SaaS 的登入 session 都可能被擷取。

ClawHub marketplace 風險。 截至 2026 年 2 月的安全稽核，ClawHub 上高達 20% 的 skill 被發現包含惡意 payload，包括竊取憑證和安裝後門。browser control 相關的 skill 風險更高，因為權限範圍大。

實務上的安全建議：

OpenClaw 創辦人 Peter Steinberger 自己也公開呼籲：跑 OpenClaw 請用沙箱環境，Docker container 搭配 read-only workspace 是底線。

OpenClaw 瀏覽器控制模式比較

跟其他瀏覽器自動化方案的差異

市場上有不少替代方案——Browser MCP、Playwright MCP、Firecrawl 等。OpenClaw + Chrome DevTools MCP 的組合有幾個結構性差異：

Chrome DevTools MCP 是 Google ChromeDevTools 團隊的官方專案。其他瀏覽器 MCP 伺服器多半是社群維護，Chrome DevTools MCP 直接對接 Chrome 的原生能力，效能追蹤和除錯深度目前沒有替代品能匹配。PulseMCP 的資料顯示，Chrome DevTools MCP 的預估訪客量約 34,100，在 browser automation 類別中排名前三。

OpenClaw 作為 agent 框架的優勢在「24/7 運行」。它不只是一個 MCP client，而是一個完整的 AI agent 基礎設施，支援 Telegram、WhatsApp、Discord 等訊息平台整合、cron 排程、multi-agent 協作（透過 Lobster workflow shell）。Browser control 是它眾多工具之一。

如果你只需要在 IDE 裡用 Chrome DevTools MCP 來除錯前端，不需要 OpenClaw。如果你需要一個可以跑在背景、自動監控網站變化、在特定條��觸發瀏覽器操作的 agent，那 OpenClaw 的 Gateway 架構和 Lobster pipeline 才是核心。

OpenClaw 的瀏覽器控制安全嗎？

安全程度取決於你的設定方式。Managed 模式（專用 Chromium 實例）有完全的 cookie 和歷史紀錄隔離，風險最低。Existing Session 模式直接共享你的真實瀏覽器 session，包括登入狀態和密碼，風險最高。最低安全標準：Gateway 綁在 localhost、用 SSH tunnel 做遠端存取、瀏覽器 profile 專用、不需要的工具預設關閉。

Chrome DevTools MCP 需要哪些系統需求？

Node.js v20.19 以上（官方建議 22+），加上 Chrome 穩定版。安裝指令是 npx chrome-devtools-mcp@latest。如果要自動連接已開啟的 Chrome，需要 Chrome 144 以上（--autoConnect 功能），而 Chrome 146 更進一步把遠端除錯做成原生選項。

OpenClaw Managed 模式和 Existing Session 模式怎麼選？

如果目標網站需要全新 session（不需要 cookies），用 Managed。如果網站有難以程式化重建的已登入 session（比如 2FA 或 SSO），用 Existing Session，但務必用專用 Chrome profile，不要用你日常的瀏覽 profile。

OpenClaw 的 ClawHub marketplace 安全嗎？

2026 年 2 月的安全稽核發現 ClawHub 上約 20% 的 skill 包含惡意 payload（竊取憑證、資料外洩、後門）。OpenClaw 已與 VirusTotal 合作掃描新上傳的 skill，但創辦人 Peter Steinberger 也承認這不是萬能的。建議：安裝任何 skill 前閱讀原始碼、檢查發布者帳號歷史，把每個 skill 當成「以你 agent 的完整權限執行的不受信任程式碼」。

如果 Chrome MCP 連線失敗怎麼排查？

先確認 chrome://inspect/#devices 的遠端除錯開關有開，然後測試 127.0.0.1:9222 是否可達。如果用 WSL2 + Windows 的組合，需要在 Windows 端設定 portproxy 和防火牆，從 WSL2 用 curl http://WINDOWS_LAN_IP:9222/json/version 測試連通性。重啟 Chrome 和 OpenClaw Gateway 通常可以解決大部分連線問題。

引用來源

• Chrome for Developers — Chrome DevTools MCP for your AI agent
• GitHub — ChromeDevTools/chrome-devtools-mcp
• OpenClaw Official Docs — Browser (OpenClaw-managed)
• OpenClaw 操控 AI 應用完全指南 (2026)

作者

Ewan Mak｜Tech Lead @ Tenten.co

一個觀察：大多數團隊對 Managed 模式的隔離設計掌握得不錯，但一旦切到 Existing Session 模式去處理需要登入的內部系統，安全意識就明顯下降。我建議做一個簡單的決策：任何涉及真實 session 的 agent 操作，先在專用 Chrome profile 裡手動登入目標網站，再讓 agent 接入，這樣即使出問題，受影響的也只是那個 profile 裡的 session。在 Tenten 協助企業導入 AI agent 自動化的過程中，我們觀察到瀏覽器控制是回報最高但也最容易出安全事故的環節。如果你正在評估 agent 自動化方案，歡迎跟 Tenten 團���預約諮詢，我們可以協助規劃安全的部署架構。

延伸閱讀：

• Mac Mini 初學者養龍蝦完全指南｜OpenClaw 安裝 + 必裝 Skill + 30 Prompts
• OpenClaw「養龍蝦」是什麼？部署教學 & 安全強化指南

I'm a Full Stack Developer with expertise in building modern web applications that fast, secure, and scalable. Crafting seamless user experiences with a passion for headless CMS, Vercel and Cloudflare

Loading...