Chrome DevTools MCP 完整指南：讓你的 AI 編碼代理控制瀏覽器

2026-07-05 Chrome DevTools MCP AI Claude Code 瀏覽器自動化

Chrome DevTools for agents — 讓 AI 編碼代理像真實開發者一樣，用 Chrome DevTools 檢查、偵錯和最佳化網頁。

2026 年上半年，GitHub 上最熱門的專案之一是 ChromeDevTools/chrome-devtools-mcp（45k+ stars）。它的定位非常直接：讓你的 AI 編碼代理（Claude Code、Cursor、Copilot、Codex 等）直接控制一個真實的 Chrome 瀏覽器執行個體。

這不是簡單的 Puppeteer 腳本封裝——它透過 MCP（Model Context Protocol）協定，將完整的 DevTools 能力暴露給 AI 代理，讓它們能夠檢視 DOM、分析網路請求、擷取螢幕截圖、檢查主控台日誌，甚至取得效能追蹤資料。

本文將從零開始，帶你了解這個專案是什麼、為什麼重要、如何配置以及實戰用法。

Chrome DevTools MCP 是什麼？

Chrome DevTools MCP 是 Google Chrome 團隊官方發佈的 MCP（Model Context Protocol）伺服器。它架起了 AI 編碼代理 和 Chrome 瀏覽器 之間的橋樑。

核心能力

能力	說明
🖥️ 瀏覽器偵錯	檢查 DOM、讀取頁面內容、擷取截圖
🌐 網路分析	檢視所有 HTTP 請求、回應標頭和狀態碼
📊 效能追蹤	錄製 Trace、取得效能資料、CrUX 真實使用者體驗資料
💬 主控台檢查	讀取 JS 主控台輸出（含 source-mapped 堆疊）
⚡ 自動化操作	基於 Puppeteer 的可靠瀏覽器自動化
🎯 精準等待	自動等待操作結果完成，避免非同步時序問題

為什麼需要它？

在此之前，AI 編碼代理操作瀏覽器主要靠兩種方案：

Puppeteer/Playwright 腳本：需要手動編寫自動化程式碼，AI 產生的腳本經常因為非同步時序問題而失敗
Chrome DevTools Protocol (CDP) 直連：協定複雜，AI 代理需要「理解」數十個底層 API

Chrome DevTools MCP 將 DevTools 的全部高階功能封裝成 MCP tools，AI 代理只需呼叫高層工具就能完成任務，大幅提升了可靠性和效率。

前置條件

安裝前需要確保以下環境就緒：

# 1. Node.js LTS 版本（v20 或 v22）
node -v  # 建議 ≥ v20.0.0
npm -v   # 建議 ≥ v10.0.0

# 2. Chrome 瀏覽器（目前穩定版或更新）
google-chrome --version

# 3. 一個支援 MCP 的 AI 編碼代理
#    Claude Code / Cursor / Copilot / Codex 等

安裝與配置

基礎安裝

Chrome DevTools MCP 透過 npm 發佈，一行指令即可安裝：

# 安裝為全域工具
npm install -g chrome-devtools-mcp

Claude Code 配置

有兩種方式接入 Claude Code：

方式一：CLI 安裝（MCP 工具）

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

方式二：安裝為外掛（MCP + Skills）

# 新增外掛市場註冊表
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

# 安裝外掛
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

# 重啟 Claude Code 後透過 /skills 檢查是否載入成功

💡 提示：如果公司防火牆導致外掛複製失敗（Failed to clone repository），可以改用 CLI 方式安裝，或者參考官方排障指南。

Cursor / VS Code Copilot 配置

在 MCP 配置檔案中加入：

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

VS Code 也可以透過指令列快速新增：

# macOS / Linux
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

# Windows PowerShell
code --add-mcp '{"""name""":"io.github.ChromeDevTools/chrome-devtools-mcp","""command""":"npx","""args""":["-y","chrome-devtools-mcp"]}'

OpenAI Codex 配置

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Windows 11 使用者需要額外配置環境變數和逾時設定：

# .codex/config.toml
[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

輕量模式（Slim Mode）

如果只需要基礎的瀏覽器操作，可以用 --slim 模式減少資源佔用：

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

實戰場景

場景一：AI 代理自動偵錯網頁

配置好後，你可以直接讓 AI 代理開啟網頁並分析：

你：開啟 https://dashen-tech.com 並幫我看一下首頁載入情況，有沒有效能問題？

AI 代理會： 1. 透過 Puppeteer 開啟頁面 2. 擷取螢幕截圖確認頁面載入狀態 3. 分析 Network 面板檢查資源載入 4. 讀取 Console 輸出排查 JS 錯誤 5. 錄製 Trace 分析 Core Web Vitals

場景二：E2E 測試自動化

以前寫 E2E 測試需要手動編寫 Puppeteer 腳本，現在只需告訴 AI 代理你的測試意圖：

你：幫我寫一個測試案例：
1. 開啟登入頁面
2. 輸入使用者名稱和密碼
3. 點擊登入按鈕
4. 驗證是否跳轉到 dashboard
5. 檢查是否有錯誤日誌

AI 代理會自動執行這些操作，並透過 DevTools 驗證每一步的結果。

場景三：效能分析與最佳化

這是 Chrome DevTools MCP 最強大的場景之一：

你：分析一下 https://example.com 的效能，找出最大的效能瓶頸

AI 代理會： 1. 錄製 Performance Trace 2. 分析 Long Tasks、Layout Shifts、FCP、LCP 等指標 3. 檢查 CrUX 真實使用者資料 4. 給出具體的最佳化建議

場景四：跨瀏覽器相容性檢查

你：開啟這個頁面，幫我檢查主控台有沒有相容性警告，
Network 面板有沒有請求失敗的情況

AI 代理可以同時檢查： - Console 中的 warning/error 資訊 - Network 請求的狀態碼和回應時間 - 頁面渲染是否正確

進階配置

關閉資料收集

Chrome DevTools MCP 預設會收集使用統計資料，可以透過以下方式關閉：

# 方式一：啟動參數
npx chrome-devtools-mcp@latest --no-usage-statistics

# 方式二：環境變數
export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1

# 方式三：CI 環境自動（CI 變數存在時自動關閉）

停用 CrUX 資料

效能工具預設會向 Google CrUX API 傳送 Trace URL 取得真實使用者資料：

npx chrome-devtools-mcp@latest --no-performance-crux

停用更新檢查

export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1

連接已有瀏覽器執行個體

如果你想讓 Chrome DevTools MCP 連接已有的瀏覽器（而不是新啟動一個），可以指定 --browser-url：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

注意：此模式下不會自動啟動瀏覽器執行個體，需要你先手動啟動 Chrome 並啟用遠端偵錯（--remote-debugging-port=9222）。

支援的 AI 編碼代理

Chrome DevTools MCP 支援目前主流的所有 AI 編碼代理：

代理	安裝方式	備註
Claude Code	CLI / Plugin	推薦 Plugin 方式（含 Skills）
Cursor	MCP 配置	JSON 配置檔案
GitHub Copilot / VS Code	CLI / Plugin	一鍵安裝或手動配置
OpenAI Codex	CLI	Windows 需額外配置
Cline	MCP 配置	參考 Cline 文件
Antigravity	MCP 配置	連接內建瀏覽器
Command Code	CLI	`cmd mcp add`
Copilot CLI	互動式配置	`/mcp add`
Amp	CLI / 配置	參考 Amp 文件

總結

Chrome DevTools MCP 是 AI 編碼代理時代的一個里程碑級專案。它讓 AI 不再只能「讀程式碼」，而是能真正操作瀏覽器、分析網路、偵錯效能——像一個真實的開發者那樣工作。

對於 dashen-tech.com 這樣的技術部落格來說，這意味著：

✅ 更可靠的 E2E 測試：AI 代理可以自動驗證文章頁面是否正常載入
✅ 自動化效能監控：定期錄製 Trace，監控 Core Web Vitals 變化
✅ 快速問題排查：直接在瀏覽器中檢查渲染問題、JS 錯誤、資源載入失敗

GitHub 位址：ChromeDevTools/chrome-devtools-mcp Stars：45k+（2026年7月） License：Apache-2.0 技術棧：TypeScript + Puppeteer + Chrome DevTools Protocol

如果你對 AI 編碼代理的瀏覽器自動化感興趣，也歡迎檢視我們之前的文章：Tabby 終端機完全指南、終端機模擬器橫評 2026。

Chrome DevTools MCP 是 Google 官方開源的 MCP 伺服器，讓 Claude Code、Cursor、Copilot 等 AI 編碼代理直接控制 Chrome 瀏覽器——自動化測試、效能分析、網頁偵錯一鍵搞定。