GitHub 頁面：Chrome DevTools MCP

瀏覽器自動化進入 MCP 時代

我在 Claude Code 裡已經用了好幾個月的 Claude in Chrome，拿它來做網頁截圖、填表單、讀取頁面內容。直到最近看到 Google 官方推出了 Chrome DevTools MCP——由 Chrome DevTools 團隊維護，整合了 Puppeteer、效能追蹤、Lighthouse 審計等功能。

這就讓我好奇了：同樣都是讓 AI 控制瀏覽器的 MCP server，兩者的定位和能力差在哪裡？

Chrome DevTools MCP：它是什麼

Chrome DevTools MCP 是 Google 官方維護的 MCP server，透過 Chrome DevTools Protocol（CDP）讓 AI agent 控制和檢查 Chrome 瀏覽器。它不只是「能點按鈕、填表單」這種程度，而是把 Chrome DevTools 的完整除錯能力暴露給 AI。

核心特點：

  • 效能追蹤：錄製 Performance trace，分析載入瓶頸，整合 CrUX 真實使用者數據
  • Lighthouse 審計：直接跑 Lighthouse 拿到效能、SEO、無障礙分數
  • 網路檢查：攔截和分析 HTTP 請求
  • 記憶體快照：偵測 memory leak
  • 裝置模擬：模擬不同裝置的 viewport 和 User Agent
  • 29 個工具：涵蓋輸入、導航、效能、網路、除錯六大類

安裝方式

Claude Code CLI（我用的方式）

一行指令搞定：

1
claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest --no-usage-statistics

--no-usage-statistics 是關掉 Google 的匿名統計收集。這是可選的，但我習慣關掉。

手動編輯設定檔

如果你偏好直接改設定，在 ~/.claude.json 的 mcpServers 裡加上：

1
2
3
4
5
6
7
{
  "chrome-devtools": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
  }
}

系統需求

  • Node.js v20.19 以上
  • Chrome 瀏覽器（stable 版即可）

安裝後重啟 Claude Code，跟它說「幫我檢查 https://你的網站.com 的效能」，它會自動啟動 Chrome、錄製 trace、給你分析報告。

Claude in Chrome：它又是什麼

Claude in Chrome 是 Anthropic 官方開發的 Chrome 擴充套件（目前為測試版）。它與 Claude Code 原生整合——透過 claude --chrome 啟動，或在 session 中輸入 /chrome 啟用。

啟用後，Claude Code 會透過 Chrome Native Messaging 與擴充套件通訊，直接操作你正在使用的 Chrome 瀏覽器。這跟 DevTools MCP 啟動獨立 Chrome 實例的做法完全不同。

使用條件：

  • Claude Code v2.0.73 以上
  • Claude in Chrome 擴充套件 v1.0.36 以上
  • Anthropic 直接方案（Pro、Max、Team、Enterprise）
  • 不支援第三方供應商（Bedrock、Vertex、Foundry）

核心特點：

  • 操作現有瀏覽器：直接控制你已登入的分頁，不需要重新認證
  • 自然語言定位：用 find 工具描述「搜尋欄」「登入按鈕」就能找到元素
  • Accessibility Tree：透過 read_page 讀取語意化的頁面結構
  • GIF 錄製：錄製操作過程輸出動畫
  • Tab Group 管理：在分頁群組中管理自動化 session
  • 截圖 + 座標點擊：像人一樣看螢幕、點位置
  • 17 個工具：涵蓋導航、互動、內容讀取、媒體

兩者的根本差異

這兩個工具看起來功能重疊，但設計哲學完全不同。

架構差異

維度 Chrome DevTools MCP Claude in Chrome
瀏覽器控制 啟動獨立 Chrome 實例 控制你正在用的 Chrome
底層協議 Puppeteer + CDP Chrome Native Messaging + Extension API
登入狀態 需重新登入（除非指定 userDataDir） 繼承你的登入 session
維護者 Google Chrome DevTools 團隊 Anthropic 官方
工具數量 29 個 17 個

能力矩陣

功能 DevTools MCP Claude in Chrome
點擊 / 填表單 / 鍵盤 ✅ ✅
頁面導航 ✅ ✅
截圖 ✅ ✅
JavaScript 執行 ✅ ✅
Console 訊息讀取 ✅ ✅
網路請求監控 ✅ ✅
效能追蹤（trace） ✅ ❌
Lighthouse 審計 ✅ ❌
記憶體快照 ✅ ❌
裝置模擬 ✅ ❌
CrUX 真實數據 ✅ ❌
自然語言元素搜尋 ❌ ✅
Accessibility Tree 讀取 ❌（DOM snapshot） ✅
GIF 錄製 ❌（需 ffmpeg 的實驗性 screencast） ✅
操作已登入的網站 ⚠️ 需設定 ✅ 直接可用
Tab Group 管理 ❌ ✅
Plan 審核機制 ❌ ✅
Headless 模式 ✅ ❌

一句話總結

  • Chrome DevTools MCP = 開發者工具。適合效能分析、除錯、自動化測試。
  • Claude in Chrome = 使用者代理。適合操作已登入的網站、填表單、擷取內容。

實際使用場景對照

場景 1：「我的網站首頁載入太慢，幫我分析」

用 DevTools MCP：AI 啟動 Chrome → 錄製 Performance trace → 分析 Long Tasks、Layout Shifts → 跑 Lighthouse 拿 Core Web Vitals → 整合 CrUX 真實數據 → 給你具體的優化建議。

用 Claude in Chrome：能開網頁、看看 Network 請求，但沒辦法錄 trace 或跑 Lighthouse。

結論：效能分析場景，DevTools MCP 完勝。

場景 2：「幫我到 Notion 上建一個新頁面」

用 Claude in Chrome：直接操作你已登入的 Notion 分頁 → 用 find 找到「New Page」按鈕 → 點擊 → 填入內容。全程不需要重新登入。

用 DevTools MCP：需要想辦法處理 Notion 的登入（OAuth、cookie），或用 --userDataDir 指向你的 Chrome profile。設定成本高。

結論：操作已登入的 SaaS 服務，Claude in Chrome 更方便。

場景 3：「這個表單在手機上排版有問題，幫我看看」

用 DevTools MCP：用 emulate 工具模擬 iPhone 15 → 截圖 → 分析 DOM → 直接告訴你 CSS 哪裡有問題。

用 Claude in Chrome：可以 resize_window 改視窗大小模擬，但沒有完整的裝置模擬（User Agent、touch event、pixel ratio）。

結論：響應式除錯，DevTools MCP 更專業。

場景 4：「錄一段操作流程的 GIF 給同事看」

用 Claude in Chrome：內建 gif_creator，開始錄製 → 操作 → 匯出 GIF，帶有點擊標記和動作標籤。

用 DevTools MCP：實驗性功能，需要額外安裝 ffmpeg，而且輸出的是 screencast 影片，不是帶標記的 GIF。

結論：操作示範錄製，Claude in Chrome 更成熟。

兩者可以共存嗎？

可以，而且我建議共存。

兩個 MCP server 啟動的是不同的 Chrome 實例（或連接方式），互不干擾。在 Claude Code 裡，AI 會根據你的指令自動選擇合適的工具。

我的實際設定：

  • 日常瀏覽器操作（填表、截圖、讀取網頁內容）→ Claude in Chrome
  • 開發除錯（效能分析、Lighthouse、記憶體洩漏排查）→ Chrome DevTools MCP
  • 自動化測試（跑完整流程、headless 環境）→ Chrome DevTools MCP

安全性考量

兩者都有值得注意的安全風險：

Chrome DevTools MCP：

  • 預設會向 Google CrUX API 發送你測試的 URL（用 --no-performance-crux 關閉）
  • 預設收集匿名使用統計（用 --no-usage-statistics 關閉）
  • 啟動獨立 Chrome，不會意外暴露你的登入 session

Claude in Chrome：

  • 直接操作你的瀏覽器，能存取你所有已登入的帳號
  • 有 Tab Group 隔離機制和 Plan 審核流程作為防護
  • 遇到登入頁面或 CAPTCHA 會暫停，要求你手動處理
  • 可在擴充套件設定中管理網站級權限，控制 Claude 能存取哪些網站

常用參數速查

Chrome DevTools MCP 的參數不少，這些是最實用的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 連接已開啟的 Chrome（需先開啟遠端除錯）
npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

# 無頭模式，適合 CI/CD
npx chrome-devtools-mcp@latest --headless

# 精簡模式，只有 3 個工具（導航、JS 執行、截圖）
npx chrome-devtools-mcp@latest --slim

# 指定視窗大小
npx chrome-devtools-mcp@latest --viewport 1920x1080

# 用 Chrome Canary
npx chrome-devtools-mcp@latest --channel canary

# 關掉所有遙測
npx chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

我的判斷

如果你只能裝一個，看你的主要需求：

  • 前端開發者，需要效能分析和除錯 → Chrome DevTools MCP
  • 日常自動化，需要操作各種已登入的網站 → Claude in Chrome
  • 兩者都需要 → 都裝，它們各司其職

Chrome DevTools MCP 的護城河在效能分析。Lighthouse、Performance trace、CrUX 數據——這些是 Google 自家的基礎設施，別的工具很難複製。

Claude in Chrome 的護城河在使用者代理。Anthropic 官方整合、直接控制你正在使用的瀏覽器、繼承登入狀態、自然語言定位元素——這種「幫你操作電腦」的體驗，DevTools MCP 的架構做不到。

兩個工具不是競爭關係，是互補關係。就像你不會拿 Chrome DevTools 的 Performance 面板去登入 Notion 寫筆記，也不會拿日常瀏覽器去跑 Lighthouse 測試。

把對的工具用在對的場景，這才是工程師該做的事。