Chrome DevTools MCP 來襲：AI 瀏覽器自動化的新標準

過去，瀏覽器自動化是一個需要專門技能的工作——你需要用 Selenium、Playwright 或 Puppeteer 來控制瀏覽器行為。這些工具是給人類工程師用的，不是給 AI 用的。Chrome DevTools MCP 的出現，改變了這一點。MCP（Model Context Protocol）讓 AI 編碼助手可以直接控制 Chrome 瀏覽器，執行程式碼、截圖、收集效能數據——全部由自然語言指令驅動。

MCP 為什麼是瀏覽器自動化的遊戲改變者

過去的瀏覽器自動化

// Selenium/Playwright/Puppeteer 的使用方式
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await page.click('#submit-button');
  const result = await page.evaluate(() => {
    return document.querySelector('.result').textContent;
  });

  console.log(result);
  await browser.close();
})();

你需要學習特定的 API、選擇一個庫、處理等待和超時——這是給人類工程師設計的工具。

MCP 時代的瀏覽器自動化

# Claude Desktop 或其他 AI 助手
# 設定 MCP server
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx @anthropic-ai/chrome-devtools-mcp",
      "args": ["--port", "9222"]
    }
  }
}

# 對 AI 說人話：
# "在 Chromium 上打開這個頁面，截圖，然後測量 LCP 時間"

# AI 翻譯成瀏覽器操作：
# MCP client → Chrome DevTools Protocol → 瀏覽器執行

AI 助手直接理解你的意圖，翻譯成 Chrome DevTools Protocol 命令，並執行。

Chrome DevTools MCP 的核心能力

頁面控制

# AI 可以直接執行的操作
# 1. 導航
await chrome_session.navigate('https://example.com')

# 2. 截圖
await chrome_session.capture_screenshot(format='png')

# 3. 執行 JavaScript
result = await chrome_session.evaluate('''
  document.querySelector('.title').textContent
''')

# 4. 點擊元素
await chrome_session.click('#submit-button')

# 5. 填寫表單
await chrome_session.fill('#email', 'user@example.com')

效能監控

# AI 可以收集效能數據
metrics = await chrome_session.performance.getMetrics()

# 結果：
# {
#   'LCP': 2.5,
#   'FID': 12,
#   'CLS': 0.05,
#   'TTFB': 320
# }

CSS 截圖對比

# 對比不同網路條件下的截圖
for condition in ['wifi', '4g-slow', '3g']:
  await chrome_session.network.setConditions(condition)
  await chrome_session.navigate('https://example.com')
  await chrome_session.capture_screenshot(filename=f'{condition}.png')

與 Playwright / Puppeteer 的比較

維度	Playwright/Puppeteer	Chrome DevTools MCP
使用方式	程式碼	自然語言
目標用戶	人類工程師	AI 助手
API 複雜度	高	低（AI 處理）
可程式化	✅ 完整	⚠️ 有限
生態系	成熟	成長中

MCP 不是要取代 Playwright——它是一個不同的工具，專門為 AI 設計的。

Chrome 130 的 WebExtensions API 更新

action.onUserSettingsChanged

Chrome 130 新增了 action.onUserSettingsChanged 事件：

// 擴充功能可以監聽用戶設置變化
chrome.action.onUserSettingsChanged.addListener((change) => {
  if (change.newValue.enabled === false) {
    console.log('用戶停用了擴充功能');
  }
});

這個 API 對於開發工具類的擴充功能特別有用——可以追蹤用戶何時開關了你的工具。

改進的 Manifest V3 支援

Manifest V3 是 Chrome 擴充功能的新版本格式：

// manifest.json (Manifest V3)
{
  "manifest_version": 3,
  "name": "My DevTool",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["https://*.example.com/*"],
  "action": {
    "default_popup": "popup.html"
  }
}

Chrome 130 對 Manifest V3 的支援更加穩定，performance profiling API 也得到改善。

2026 年 Chrome 擴充功能生態

開發者常用的擴充功能

擴充功能	用途
React DevTools	React 組件偵錯
Redux DevTools	Redux 狀態管理
Vue DevTools	Vue 3 偵錯
Lighthouse	效能審計
WebPageTest	頁面速度測試

AI 助理工具

工具	功能
Monica AI	全頁面截圖、頁面分析
daily.dev	開發者新聞、頁面預覽
AIPRM	ChatGPT SEO 優化

Chrome Extensions 的未來

Chrome Extensions 正在整合更多 AI 能力：

// 未來可能的 API
chrome.aiassist.analyzePage({
  purpose: '找出這個頁面的效能瓶頸'
}, (analysis) => {
  console.log(analysis.bottlenecks);
});

實際應用場景

自動化的 UI 測試

# 對 AI 說：
# "自動化測試這個登入流程：輸入 admin@example.com / 密碼 123456，
#  提交，驗證成功後截圖"

# AI MCP 執行的步驟：
# 1. navigate('https://app.example.com/login')
# 2. fill('#email', 'admin@example.com')
# 3. fill('#password', '123456')
# 4. click('#login-button')
# 5. waitForNavigation()
# 6. capture_screenshot('login-success.png')

效能迴歸檢測

# "對比這個頁面在 main 分支和 feature 分支的 LCP 差異"
# MCP 可以自動化這個來回對比過程

跨瀏覽器測試

# "在 Chrome、Edge 和 Firefox 上測試這個頁面的 CLS"
# MCP 支援多瀏覽器自動化

MCP 的限制

MCP 目前仍有局限：

複雜交互：需要多步驟思考的流程仍需要人類工程師
錯誤恢復：當頁面加載失敗時，AI 的處理能力有限
安全性：AI 控制瀏覽器打開了一個新的安全攻擊面

對於需要精確控制的場景，Playwright 和 Puppeteer 仍然是更好的選擇。

結語：AI 正在學會控制瀏覽器

Chrome DevTools MCP 的出現，代表了瀏覽器自動化的下一個演進方向：不是讓人類更容易自動化，而是讓 AI 能夠自動化。

這個轉變的影響是深遠的：

測試：AI 可以自動跑 UI 測試，不需要人類寫測試代碼
效能監控：AI 可以自動收集效能數據並提出改善建議
除錯：AI 可以自動化重現用戶遇到的問題

MCP 不是要取代 Playwright——它是給 AI 用的不同工具。當 AI 能夠控制瀏覽器時，「用自然語言驅動的自動化」將成為新的標準。