截至 2026 年 7 月。功能與定價以官方 GitHub 為準，本文為中性技術介紹，不構成投資或消費建議。
用 AI agent 寫網頁最挫折的一刻，通常是這樣：它信誓旦旦說「修好了」，你打開瀏覽器一看——版面破了、console 一堆紅字、API 根本沒回來。問題是 agent 看不到瀏覽器裡發生什麼，只能瞎猜。這個由 Chrome DevTools 官方團隊做的開源工具 chrome-devtools-mcp（約 44,900 星）就是來解這個的：把 Chrome DevTools 的能力接給你的 AI agent，讓它自己打開真瀏覽器除錯。
Apache-2.0 授權、Chrome 官方出品。這篇幫你看懂它能幹嘛、怎麼接上 Claude Code／Cursor。
chrome-devtools-mcp 是什麼？
白話講：它是一個 MCP（Model Context Protocol）伺服器，讓你的 coding agent（Claude Code、Cursor、Copilot、Antigravity 等）能操控並檢查一個真的、活的 Chrome 瀏覽器。等於把整套 Chrome DevTools 的力量交到 AI 手上——它可以自己開網頁、看 console、查網路請求、截圖、跑效能分析，然後根據真實結果去修，而不是憑空亂改。
核心功能
- 效能分析：錄製 trace、抽出效能洞察，找出卡頓在哪。
- 進階除錯：分析網路請求、截圖、看 console 訊息（含 source map 還原的錯誤堆疊）。
- 可靠自動化：底層走 Puppeteer，動作會自動等結果，不會亂點一通。
- 更多：Lighthouse 稽核、記憶體 heap 快照、模擬點擊／填表／導航。
怎麼裝、怎麼接上 agent
前提：Node.js LTS 版、Chrome（穩定版或更新）。
- 直接跑：
npx -y chrome-devtools-mcp@latest（想省資源可加--slim --headless） - 接 Claude Code：
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest - 接 Cursor：在 MCP 設定加一段：
{"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest"]}}}
接好之後，你就能跟 agent 說「打開這個頁面、看看 console 有什麼錯」「幫我分析這頁載入為什麼這麼慢」，它會真的去 Chrome 裡查。
要錢嗎？
免費、Apache-2.0 開源、Chrome 官方維護。沒有額外服務費——你付的頂多是 agent 本身呼叫模型的 token 成本（想省可搭配 OmniRoute 這類 AI gateway）。
適合誰？不適合誰？
- ✅ 適合：用 Claude Code／Cursor 做前端／網頁、常要除錯和調效能的開發者；想讓 AI「眼見為憑」而不是瞎改的人。
- ❌ 不適合：完全不做網頁前端的人；不想裝 Node／Chrome、不碰 MCP 設定的純新手。
常見問題 FAQ
它跟一般的瀏覽器自動化工具差在哪？
它是 Chrome 官方出品、專為「接 AI agent」設計的 MCP，除了自動化操作，還把 DevTools 的除錯與效能分析能力一起開放給 agent；一般自動化工具多半只做操作、不給這麼深的診斷資訊。
會不會有安全風險？
它讓 agent 能操控你的瀏覽器，建議在你信任的專案與環境用、避免讓它連向不明網站。跟所有能操作本機的工具一樣，權限給得越大越要謹慎。
免責聲明：本文為 AI 工具的中性資訊整理，數據以官方 GitHub 為準，可能隨版本變動。讓 AI 操控瀏覽器涉及本機權限，請在信任環境使用、自行評估安全風險。內容不構成任何投資、消費或技術採用建議。
延伸閱讀：完整的 GitHub 熱門開源 AI 專案精選，20+ 個開源工具依用途分類收藏、持續更新。
發表迴響