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

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

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

什麼是 Chrome DevTools MCP？

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

運作方式

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

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

核心特色

高階工具 🛠️
- navigate_page - 導航到任何 URL
- click_element - 點擊按鈕、連結等
- type_text - 填寫表單
- take_screenshot - 截取頁面畫面
- list_console_messages - 查看控制台日誌
- execute_script - 執行 JavaScript
Puppeteer 驅動 🤖
- 經過實戰驗證的 Chrome 自動化
- 自動等待（頁面載入、DOM 準備）
- 可靠處理複雜互動
DevTools 整合 🔍
- 存取 Chrome DevTools Protocol (CDP)
- 檢查網路請求
- 調試 JavaScript 錯誤
- 監控效能
對話式自動化 💬
- 自然語言指令
- AI 處理 CSS 選擇器
- 無需編寫腳本

安裝與設定

先決條件

已安裝 Chrome/Chromium 瀏覽器
Node.js 16+（用於 Puppeteer）

方法一：官方 CLI（推薦）

# 安裝到全域
claude mcp add \
  --scope global \
  chrome-devtools \
  -- npx -y @chromedevtools/chrome-devtools-mcp

方法二：手動配置

編輯 .mcp.json 或 ~/.claude/.mcp.json：

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

實際使用範例

範例一：自動化測試

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

Chrome DevTools MCP 執行：
1. navigate_page("https://myapp.com")
2. click_element("button[data-testid='login']")
3. type_text("input[name='username']", "testuser")
4. type_text("input[name='password']", "testpass123")
5. click_element("button[type='submit']")
6. 返回：成功 - 已重導向到 /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. 啟用效能監控進行導航
2. list_console_messages（檢查錯誤）
3. execute_script 取得 Web Vitals

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

可用工具

1. `navigate_page(url)` - 導航到 URL

2. `click_element(selector)` - 點擊元素

3. `type_text(selector, text)` - 輸入文字

4. `take_screenshot(options)` - 截圖

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

6. `execute_script(script)` - 執行 JavaScript

7. `get_page_content()` - 取得頁面 HTML

8. `wait_for_selector(selector, timeout)` - 等待元素出現

最佳實踐

✅ 推薦

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

❌ 避免

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

使用情境

使用情境	說明	複雜度
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）

立即開始

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