Chrome DevTools MCP

Chrome DevTools

Google Chrome 團隊維護的 MCP — 透過 Chrome DevTools Protocol 連到你已開啟的 Chrome 視窗，做網頁效能 profiling、network trace、JS console、CPU/memory 觀察。Playwright 是「自動化乾淨瀏覽器」，DevTools MCP 是「分析既有瀏覽 session」，兩者互補。

無需 Token進階設定

為何走本機安裝

DevTools 需要透過 CDP socket 連到你自己的 Chrome 實例（你正在用的那個，含登入 session、開啟分頁）。hub 託管不可能跨機器存取你的 Chrome。只能裝在本機。

前置需求

Node.js ≥ 18
Chrome（穩定版即可，不需 Canary）
支援 MCP 的 client

安裝步驟

啟動 Chrome 並開遠端 debug port

關掉所有現有 Chrome 視窗（重要 — 必須以 debug 模式重新啟動）。

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

google-chrome --remote-debugging-port=9222

Windows (PowerShell)

& "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

Claude Desktop (macOS)

~/Library/Application Support/Claude/claude_desktop_config.json

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

完整安裝文件 (GitHub)

第一次使用

範例提示詞

列出我目前打開的 Chrome 分頁

常用工具

list_tabs() — 列出開啟的分頁
take_snapshot(tabId) — 取目前 DOM 快照
evaluate(tabId, code) — 在頁面 console 跑 JS
start_trace(tabId) / stop_trace() — 效能 profiling
get_network_logs(tabId) — 抓 network requests

故障排除

問題	解法
「無法連線」	確認 Chrome 以 --remote-debugging-port=9222 啟動；先關掉所有 Chrome 再開
連到錯的 Chrome	macOS 上若 Chrome 已開，新啟動會 attach 到既有 process（沒開 debug port）。需先全關。
看不到我的登入分頁	用同一個 user data dir：--user-data-dir=$HOME/Library/Application\ Support/Google/Chrome/Default

安全考量

重要：--remote-debugging-port=9222 預設只 bind localhost (127.0.0.1)，外網無法連。絕對不要改成 --remote-debugging-address=0.0.0.0，那會讓任何人能控制你的瀏覽器。