還在為 AI 寫的網頁 bug 抓瞎？Chrome DevTools MCP 就像給 AI 戴上「透視眼鏡」——從此它能自己開瀏覽器、看 console、抓網路請求，甚至幫你截圖。下面這篇「懶人包」帶你在 macOS 上 5 分鐘搞定安裝，順便解答最常見的踩坑問題。
3.1 前置檢查：裝好這三樣就能起跑
| 項目 | 最低版本 | 快速指令 |
|---|---|---|
| Node.js | 18+ | node -v |
| Google Chrome | 最新穩定版 | 打開 Chrome → 關於 |
| Homebrew | 不限 | brew -v |
如果 Node 版本過舊，建議用 nvm 切換，避免權限地雷。
3.2 一鍵安裝：用 Homebrew 最快
打開終端機，貼上這行就對了：
brew install chrome-devtools-mcp
Homebrew 會自動把執行檔放進 /opt/homebrew/bin，安裝完確認版本：
chrome-devtools-mcp --version
# 輸出類似 v0.8.0 即成功
3.3 手動安裝：想掌控細節就 npm 全局
不想用 Homebrew？沒問題，npm 一樣香：
npm install -g chrome-devtools-mcp
裝好後，執行 chrome-devtools-mcp 預設會在 http://localhost:12524 啟動服務。
3.4 讓 Claude Desktop「看見」瀏覽器
-
建立設定檔目錄
mkdir -p ~/.config/claude/mcp -
編輯
~/.config/claude/mcp/chrome-devtools.json{ "mcpServers": { "chrome-devtools": { "command": "chrome-devtools-mcp", "args": [], "env": {} } } } -
重啟 Claude Desktop，看到綠色勾勾就代表連線成功。
3.5 常見錯誤與急救包
| 錯誤訊息 | 原因 | 解法 |
|---|---|---|
command not found |
PATH 沒吃到 | export PATH="/opt/homebrew/bin:$PATH" 加進 ~/.zshrc |
EADDRINUSE |
12524 被佔用 | `lsof -ti:12524 |
| Claude 顯示離線 | 防火牆擋住 | 把 localhost:12524 加入 macOS 安全性允許清單 |
3.6 升級與移除
升級只要：
brew upgrade chrome-devtools-mcp
想砍掉重練：
brew uninstall chrome-devtools-mcp
npm uninstall -g chrome-devtools-mcp
3.7 下一步：讓 AI 幫你跑自動化測試
安裝完別急著關機，趕緊試試這幾個咒語：
- 「打開
localhost:8080，截圖給我看。」 - 「幫我檢查 console 有沒有紅字。」
- 「點擊登入按鈕，看會不會跳 404。」
你會發現 AI 不再「紙上談兵」，而是真的在瀏覽器裡幫你 Debug，爽感爆棚！
參考與延伸資源
- How to Install Chrome DevTools MCP on macOS
- Chrome DevTools MCP: 終結前端開發的難題
- 如何在 macOS 上安裝 Chrome DevTools MCP？三步搞定！ - topics - Tenten AI
- 自動化工具終極對決：Zapier MCP 2.0、n8n MCP、Make.com MCP 深度剖析
- AI Agent與MCP/ A2A 協議在工業計算與自動化產業的前景
- 如何用Claude Desktop建立個人AI助手：完整MCP配置指南
- MCP x n8n = 自動化開外掛！懶人包快速入門
- 什麼是 MCP: 連接AI代理與資料庫和API的新標準
- MCP與AI代理將取代RPA工具？自動化革命深度解析
- AI 互動協議的演進: 剖析 Function Calling、MCP 與 A2A
- 使用 Taskmaster AI 打造高效 Vide Coding
作者
Erik Chen
「當 AI 能自己打開瀏覽器的那天，我們離『全自動工程師』又更近了一步。Chrome DevTools MCP 只是第一步，卻是最關鍵的一步——因為它讓 AI 真正『看見』了網頁。」