Chrome DevTools MCP：AI 驅動的瀏覽器自動化

想像一下對 AI 助手說：「測試登入表單是否有效」或「截圖首頁」- 它就直接執行了。不需要寫 Puppeteer 腳本，不需要調試 CSS 選擇器。

Chrome DevTools MCP 讓這成為可能。這是 Google 官方的 MCP 服務器，將 AI 代理連接到 Chrome 瀏覽器的 DevTools，實現對話式瀏覽器自動化。

2026 年 11 月 4 日更新： 依官方儲存庫校正：npm 套件名稱是 chrome-devtools-mcp（不是 @chromedevtools/chrome-devtools-mcp）；Claude Code 沒有 --scope global（請改用 --scope user）；user 與 local scope 的伺服器存放在 ~/.claude.json，不是 ~/.claude/.mcp.json；工具也改為實際名稱（click、fill、evaluate_script、take_snapshot、wait_for），並以頁面快照中的 uid（而非 CSS 選擇器）指定元素。Node.js 版本需求也一併修正。

什麼是 Chrome DevTools MCP？

Chrome DevTools MCP 是一個專門的 MCP 服務器，作為 AI 模型和真實 Chrome 瀏覽器實例之間的橋樑，使用 Puppeteer 進行可靠的自動化。

運作方式

你（自然語言）
  ↓
Claude（MCP 客戶端）
  ↓
Chrome DevTools MCP Server
  ↓
Puppeteer（自動化函式庫）
  ↓
Chrome 瀏覽器（透過 Chrome DevTools Protocol）

關鍵概念：不需要寫 Puppeteer 腳本，你用自然語言描述想要什麼，AI 會處理技術細節。

核心特色

1. 高階工具 🛠️

   • navigate_page - 導航到任何 URL
   • take_snapshot - 以文字讀取頁面，每個元素都有 uid
   • click - 點擊按鈕、連結等
   • fill - 填寫表單欄位
   • take_screenshot - 截取頁面畫面
   • list_console_messages - 查看控制台日誌
   • evaluate_script - 執行 JavaScript

2. Puppeteer 驅動 🤖

   • 經過實戰驗證的 Chrome 自動化
   • 自動等待（頁面載入、DOM 準備）
   • 可靠處理複雜互動

3. DevTools 整合 🔍

   • 存取 Chrome DevTools Protocol (CDP)
   • 檢查網路請求
   • 調試 JavaScript 錯誤
   • 監控效能

4. 對話式自動化 💬

   • 自然語言指令
   • AI 從頁面快照中找出元素
   • 無需編寫腳本

安裝與設定

先決條件

• Google Chrome 目前的穩定版或更新版本（也可用 Chrome for Testing；其他 Chromium 系瀏覽器不在官方支援範圍）
• 目前的 Node.js LTS 版本（套件支援 20 系列的 v20.19 以上、22 系列的 v22.12 以上，以及 v23 以後的版本）
• npm

方法一：官方 CLI（推薦）

# 安裝到你所有的專案（user scope）
claude mcp add \
  --scope user \
  chrome-devtools \
  -- npx -y chrome-devtools-mcp@latest

@latest 會讓 npx 啟動伺服器的最新版本。

方法二：手動配置

編輯專案根目錄的 .mcp.json（project scope）。user 與 local scope 的伺服器存放在由 Claude Code 代為管理的 ~/.claude.json，請改用 claude mcp add 新增：

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

實際使用範例

範例一：自動化測試

你：「測試 https://myapp.com 的登入流程：
1. 導航到網站
2. 點擊登入按鈕
3. 填入使用者名稱和密碼
4. 提交表單
5. 檢查是否重導向到 /dashboard」

Chrome DevTools MCP 執行：
1. navigate_page({ url: "https://myapp.com" })
2. take_snapshot() → 列出頁面元素，每個元素都有 uid
3. click({ uid: "<登入按鈕>" })
4. take_snapshot() → 找到表單欄位
5. fill({ uid: "<使用者名稱欄位>", value: "testuser" })
6. fill({ uid: "<密碼欄位>", value: "testpass123" })
7. click({ uid: "<提交按鈕>" })
8. 返回：成功 - 已重導向到 /dashboard

結果：用自然語言完成完整的 E2E 測試

範例二：視覺回歸測試

你：「在不同螢幕尺寸下截圖 https://mysite.com：
桌面 (1920x1080)、平板 (768x1024)、手機 (375x667)」

Chrome DevTools MCP 執行：
1. 設定視窗 1920x1080 → 截圖為 desktop.png
2. 設定視窗 768x1024 → 截圖為 tablet.png
3. 設定視窗 375x667 → 截圖為 mobile.png

結果：3 張截圖供視覺比較

範例三：效能調試

你：「載入 https://myapp.com 並告訴我：
- 載入需要多久時間？
- 有任何控制台錯誤嗎？
- Largest Contentful Paint (LCP) 是多少？」

Chrome DevTools MCP 執行：
1. navigate_page({ url: "https://myapp.com" })
2. performance_start_trace({ reload: true, autoStop: true }) → 取得含 LCP 等 Core Web Vitals 的效能追蹤
3. list_console_messages()（檢查錯誤）

返回：
- 載入時間：2.3秒
- 錯誤：無
- LCP：1.8秒（良好）

可用工具

以下是核心工具，其餘工具（模擬、網路、效能、Lighthouse、記憶體等）請見工具參考。操作元素的工具會使用最新一次 take_snapshot 中該元素的 uid；以頁面為對象的工具另外需要 list_pages 提供的 pageId。

1. navigate_page(url, timeout) - 導航到 URL

2. click(uid) - 點擊元素

3. fill(uid, value) - 填入輸入框或選擇 <select> 選項

4. take_screenshot(options) - 截圖

5. list_console_messages() - 列出控制台訊息

6. evaluate_script(function) - 在頁面中執行 JavaScript 函式

7. take_snapshot() - 取得以無障礙樹為基礎、附有元素 uid 的文字快照

8. wait_for(text, timeout) - 等待指定文字出現

最佳實踐

✅ 推薦

1. 在 evaluate_script 程式碼中使用語義化選擇器 - data-testid 優於複雜 CSS
2. 等待動態內容 - 為 SPA/AJAX 重度網站使用 wait_for（等待文字出現）
3. 優雅處理錯誤 - 請 Claude「嘗試點擊提交，如果失敗檢查控制台錯誤」
4. 響應式測試 - 跨多個視窗尺寸測試
5. 結合其他 MCP - Filesystem 儲存截圖、Memory 記住測試結果

❌ 避免

1. 硬編碼延遲 - 使用 wait_for 而非 setTimeout
2. 脆弱選擇器 - 偏好 data-testid 而非複雜 CSS
3. 忽略控制台錯誤 - 總是檢查控制台訊息
4. 大型截圖 - 指定區域以減少檔案大小

使用情境

使用情境	說明	複雜度
E2E 測試	自動化使用者流程測試	⭐⭐⭐⭐⭐
視覺回歸	截圖比較	⭐⭐⭐⭐⭐
網頁爬蟲	從網站提取資料	⭐⭐⭐⭐
效能監控	追蹤載入時間、Web Vitals	⭐⭐⭐⭐
無障礙測試	檢查 ARIA 標籤、對比度	⭐⭐⭐⭐
表單自動化	自動填寫和提交表單	⭐⭐⭐

與其他 MCP 整合

Chrome DevTools + Filesystem MCP

Chrome DevTools + Memory MCP

Chrome DevTools + Context7 MCP

結論

Chrome DevTools MCP 為 AI 助手帶來對話式瀏覽器自動化。不需要寫自動化腳本，你描述想要什麼，Claude 處理技術細節。

適合你嗎？

使用情境	推薦度
手動測試人員	⭐⭐⭐⭐⭐
快速調試	⭐⭐⭐⭐⭐
網頁爬蟲	⭐⭐⭐⭐
E2E 測試	⭐⭐⭐⭐
CI/CD 管線	⭐⭐（使用 Playwright/Cypress）

立即開始

1. 安裝：claude mcp add --scope user chrome-devtools -- npx -y chrome-devtools-mcp@latest
2. 開啟 Claude 並說：「導航到 https://example.com 並截圖」
3. 見證魔法發生 ✨

延伸閱讀

• Chrome DevTools MCP GitHub
• Chrome 官方部落格文章
• Addy Osmani 指南
• DataCamp 教學