Chrome DevTools MCP：讓 AI 看到真實瀏覽器

作者：章魚小棧
日期：2026年3月23日 上午11:29
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

Chrome DevTools MCP 結束 AI 盲編程，畀 AI 直接睇到真實瀏覽器環境

整理版摘要

呢篇文章由 Google Chrome 團隊推出，介紹 Chrome DevTools MCP 呢個工具點樣解決 AI 無法直接存取真實瀏覽器環境嘅問題。以前 AI 除錯只可以靠你畀嘅 code snippet 去估，根本睇唔到 DOM、CSS 或者 network request。作者透過 MCP（Model Context Protocol）同 CDP（Chrome DevTools Protocol）嘅雙層架構，整咗一個標準化接口，令到 Claude、Gemini、Cursor 呢啲 AI 工具都可以直接控制 Chrome 瀏覽器嘅真實實例。

文章詳細解釋咗 MCP 點樣統一唔同 AI 嘅插件系統，CDP 又點樣提供底層調試能力。佢哋嘅工作流程係你對 AI 講一句自然語言命令，AI 就經 MCP server 用 CDP 控制 Chrome，再拎返結果畀你。成個過程唔使你手寫 selector，AI 會自動識別頁面元素。

整體結論係 Chrome DevTools MCP 喺前端除錯、性能分析同 network 調試上好強大，尤其係官方維護、兼容多款 AI 工具。不過佢只支援 Chrome，而且 token 消耗比 Playwright MCP 高少少。文章最後仲提供咗配置步驟、6 個實戰案例同工具對比，幫你快速上手。

  • Chrome DevTools MCP 讓 AI 直接操控真實瀏覽器，結束盲編程時代。
  • 雙層架構：MCP 統一 AI 工具接口，CDP 提供 Chrome 底層調試能力。
  • 無需手寫選擇器，自然語言即可控制瀏覽器，提升開發效率。
  • 適用於前端除錯、性能分析、網絡請求調試等場景。
  • 相比 Playwright MCP 調試更強，但僅支援 Chrome 且 Token 消耗較高。
值得記低
連結 developer.chrome.com

官方博客

Chrome DevTools MCP 介紹文章

開啟
連結 github.com

GitHub 倉庫

Chrome DevTools MCP 原始碼與說明

開啟
連結 modelcontextprotocol.info

MCP 協議

Model Context Protocol 官方網站

開啟
結構示例

內容結構

內容結構 text 
AI Agent (Claude/Cursor/Gemini)    ↓ MCP 協議（標準化接口）Chrome DevTools MCP Server    ↓ CDP 協議（Chrome 調試接口）Chrome Browser    ↓ WebSocket/stdio真實瀏覽器實例
整理重點

背景與核心價值

以前你叫 AI 幫手除錯前端 bug，佢只可以睇你貼嘅 code snippet 去估，根本冇辦法知道瀏覽器入面真實發生緊啲乜。或者你想做自動化測試，但要手寫一堆 selector 同定位 code，AI 完全唔知頁面有啲咩元素。呢個正正係 Chrome DevTools MCP 要解決嘅問題。

整理重點

技術原理：MCP + CDP 雙層架構

MCP（Model Context Protocol）係 Anthropic 喺 2024 年底提出嘅標準化協議，用嚟連接 AI 模型同外部工具。以前每個 AI 工具都有自己嘅插件系統，寫一次 integration 淨係畀一個 AI 用。MCP 就統一咗接口，寫一次 MCP server，所有 AI 工具都用得。

CDP（Chrome DevTools Protocol）係 Chrome 瀏覽器嘅底層調試協議，可以檢查同修改 DOM、獲取 CSS 樣式、監控 network 請求、錄製 performance trace 等等。

雙層架構係咁行：AI Agent（例如 Claude）經 MCP 協議同 Chrome DevTools MCP Server 溝通，Server 再經 CDP 協議控制 Chrome Browser。整個流程係你對 AI 講「檢查 web.dev 嘅 LCP」，AI 就自動叫 MCP server 做嘢，最後將結果話畀你知。

  1. 1 你對 AI 說：「檢查 web.dev 嘅 LCP」
  2. 2 AI 透過 MCP 協議調用 Chrome DevTools MCP
  3. 3 MCP server 透過 CDP 協議控制 Chrome
  4. 4 Chrome 執行操作，返回性能數據
  5. 5 MCP server 將結果返回畀 AI
  6. 6 AI 將結果話畀你知
整理重點

配置與實戰案例

配置 Chrome DevTools MCP 好簡單，以 Claude Desktop 為例，只需幾步就搞掂。

  1. 1 執行 npm install -g chrome-devtools-mcp
  2. 2 編輯 ~/Library/Application Support/Claude/claude_desktop_config.json，加入 mcpServers 配置
  3. 3 重啓 Claude Desktop
  4. 4 測試：叫 AI 檢查 web.dev 嘅 LCP

除咗 Claude，仲可以喺 Cursor、Gemini CLI 同 VS Code 上面用相同嘅 npx 指令配置。

  • 表單自動填充：你講「填寫登入表單」，AI 自動揾到 email 同 password 輸入框，唔使你寫 selector。
  • 網絡請求調試：你問「點解 API 失敗？」，AI 讀 network log 分析 status code 同 headers，話你知 CORS 配置錯咗。

呢啲案例展示咗自然語言控制瀏覽器嘅效率，尤其係表單填充同 performance 診斷，快過手寫 code 好多。

整理重點

工具對比與行動建議

同其他 MCP 工具比較，Chrome DevTools MCP 喺除錯場景最強，但 token 消耗較高，而且只支援 Chrome。如果你需要跨瀏覽器測試，就要用 Playwright MCP。

  1. 1 立即配置 Chrome DevTools MCP（5 分鐘）
  2. 2 練習表單填充、性能診斷同網絡調試呢 3 個案例（30 分鐘）
  3. 3 對比測試 Chrome DevTools MCP 同 Playwright MCP 嘅 token 消耗（15 分鐘）

呢份行動清單可以幫你快啲上手，揀最啱自己嘅工具組合。

開篇：點解需要 Chrome DevTools MCP？

你有冇遇過呢種情況：

前端頁面出咗 Bug，你叫 AI 幫你除錯。結果 AI 只能根據你貼嘅代碼片段估問題，根本睇唔到真實嘅瀏覽器環境。

或者你想叫 AI 幫你做自動化測試，但係要手寫一堆選擇器、定位代碼，AI 根本唔知頁面上面有啲乜嘢元素。

Chrome DevTools MCP 就係為咗解決呢個問題而出現嘅。

佢令 AI 可以直接睇到瀏覽器裏面嘅真實情況：DOM 結構、CSS 樣式、網絡請求、性能指標。AI 唔再係「盲編程」，而係可以好似你咁打開 DevTools 嚟除錯。

核心價值：

  • • 終結 AI「盲編程」時代
  • • 令 AI 睇到真實嘅瀏覽器行為
  • • 用自然語言控制瀏覽器，唔使手寫選擇器

一、技術原理：MCP + CDP 雙層架構

1.1 咩係 MCP？

MCP (Model Context Protocol) 係 Anthropic 喺 2024 年底提出嘅標準化協議，用嚟連接 AI 模型同外部工具。

點解需要 MCP？

以前，每個 AI 工具都有自己嘅插件系統：

  • • Claude 有 Claude 插件
  • • Cursor 有 Cursor 擴展
  • • Gemini 有 Gemini 工具

結果就係：同一個功能，要為唔同嘅 AI 寫唔同嘅集成代碼。

MCP 嘅解決方案：

  • • 統一接口：寫一次 MCP server，所有 AI 工具都用得
  • • 標準化：工具定義、調用、回傳都係結構化嘅
  • • 解耦：AI 工具同外部工具通過 MCP 協議通訊

1.2 咩係 CDP？

CDP (Chrome DevTools Protocol) 係 Chrome 瀏覽器嘅底層除錯協議。

佢可以做到啲咩？

  • • 檢查同修改 DOM
  • • 獲取同設定 CSS 樣式
  • • 監控網絡請求
  • • 錄製性能追蹤
  • • 執行 JavaScript
  • • 設定斷點、除錯代碼

應用場景：

  • • Puppeteer（Node.js 自動化庫）
  • • Cypress（測試框架）
  • • Playwright（跨瀏覽器自動化）

1.3 雙層架構

AI Agent (Claude/Cursor/Gemini)
    ↓ MCP 協議（標準化接口）
Chrome DevTools MCP Server
    ↓ CDP 協議（Chrome 調試接口）
Chrome Browser
    ↓ WebSocket/stdio
真實瀏覽器實例

工作流程：

  1. 1. 你對 AI 講：「檢查 web.dev 嘅 LCP」
  2. 2. AI 通過 MCP 協議調用 Chrome DevTools MCP
  3. 3. MCP server 通過 CDP 協議控制 Chrome
  4. 4. Chrome 執行操作，返返性能數據
  5. 5. MCP server 將結果返畀 AI
  6. 6. AI 將結果話畀你知

關鍵組件：

  • • MCP Server：標準化接口，所有 AI 工具通用
  • • CDP：Chrome 嘅底層能力
  • • 瀏覽器實例：真實運行 Chrome

二、配置教學：主流工具整合

2.1 Claude Desktop 配置

步驟 1：安裝 Chrome DevTools MCP

npm install -g chrome-devtools-mcp

步驟 2：編輯設定檔

macOS 路徑：~/Library/Application Support/Claude/claude_desktop_config.json

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

步驟 3：重開 Claude Desktop

步驟 4：測試

喺 Claude 輸入：

Please check the LCP of web.dev

如果 Claude 可以返返性能數據，就代表配置成功。

2.2 Cursor 配置

步驟 1：打開 Cursor 設定 → MCP Servers

步驟 2：加配置

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

步驟 3：重開 Cursor

步驟 4：喺 Copilot Chat 用

輸入 # 睇曬所有可用工具，揾到 Chrome DevTools 相關嘅工具。

2.3 Gemini CLI 配置

一行指令：

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

驗證：

gemini chat
> Please check the LCP of web.dev

2.4 VS Code 配置

步驟 1：安裝 MCP 擴展

步驟 2：編輯 mcp.json

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

步驟 3：重開 VS Code

三、實戰案例：6 個應用場景

案例 1：表單自動填寫

場景：自動填寫登入表單

傳統方式：

// 手寫選擇器
await page.locator('input[type="email"]').fill('test@example.com');
await page.locator('input[type="password"]').fill('testpass123');
await page.locator('button[type="submit"]').click();

Chrome DevTools MCP 方式：

你：Fill out the sign-in form with email test@example.com and password testpass123

AI：
1. 找到郵箱輸入框 → 輸入 test@example.com
2. 找到密碼輸入框 → 輸入 testpass123
3. 找到提交按鈕 → 點擊

優勢：

  • • 唔使手寫選擇器，AI 自動識別元素
  • • 支援複雜表單（下拉框、複選框、日期選擇器）

案例 2：性能問題診斷

場景：分析頁面 LCP（Largest Contentful Paint）

你：Check the LCP of web.dev

AI：
1. 打開 web.dev
2. 開始性能追蹤
3. 等待頁面加載完成
4. 停止追蹤
5. 獲取 LCP 指標

結果：
LCP: 1.2s
FID: 45ms
CLS: 0.05
建議：圖片優化、減少 JavaScript 阻塞

實際應用：

  • • 快速診斷性能瓶頸
  • • 對比優化前後效果
  • • 生成性能報告

案例 3：網絡請求除錯

場景：發現某個 API 請求失敗，叫 AI 分析原因

你：Why is my API call failing?

AI：
1. 讀取網絡日誌
2. 找到失敗的請求
3. 分析請求詳情（headers、response、status code）
4. 診斷原因

結果：
請求：POST /api/user
狀態碼：403 Forbidden
原因：CORS 配置錯誤
建議：在後端添加 Access-Control-Allow-Origin 頭

案例 4：跨瀏覽器測試

場景：測試頁面喺唔同瀏覽器入面嘅表現

你：Compare how this page renders in Firefox and WebKit

AI：
1. 在 Firefox 中打開頁面 → 截圖
2. 在 WebKit 中打開頁面 → 截圖
3. 對比兩張截圖
4. 報告差異

注意：跨瀏覽器測試需要 Playwright MCP，Chrome DevTools MCP 只支援 Chrome。

案例 5：批量數據提取

場景：從網頁中提取結構化數據

你：Extract all product names and prices from this e-commerce page

AI：
1. 找到所有商品元素
2. 遍歷每個元素
3. 提取名稱和價格
4. 返回 JSON 格式數據

結果：
[
  {"name": "iPhone 15", "price": "$999"},
  {"name": "MacBook Pro", "price": "$1999"},
  ...
]

實際應用：

  • • GitHub star 整理
  • • 電商價格監控
  • • 新聞聚合

案例 6：UI 測試自動化

場景：自動化測試用戶註冊流程

你：Test the user registration flow

AI：
1. 打開註冊頁面
2. 填寫表單
3. 提交
4. 驗證是否跳轉到成功頁面
5. 檢查是否有錯誤提示

結果：
✅ 表單填寫成功
✅ 提交成功
✅ 跳轉到成功頁面
❌ 發現錯誤：密碼強度提示未顯示

四、工具對比：邊個更適合你？

4.1 Chrome DevTools MCP vs Playwright MCP

       
                                           
維度Chrome DevTools MCPPlaywright MCP
底層協議CDPPlaywright API
瀏覽器支援只 Chrome/ChromiumChrome、Firefox、WebKit
Token 效率中等高（3.2x 更高效）
除錯能力強（完整 DevTools 功能）中等
學習曲線低（自然語言即可）中等（需要了解 Playwright）
適用場景除錯、性能分析、前端開發跨瀏覽器測試、E2E 測試
       
     

結論：

  • • 需要除錯 → Chrome DevTools MCP
  • • 需要跨瀏覽器測試 → Playwright MCP

4.2 Chrome DevTools MCP vs Browser MCP

       
                                           
維度Chrome DevTools MCPBrowser MCP
實現方式Chrome 擴展 + MCP serverChrome 擴展 + MCP server
性能中等高（本地自動化）
安裝複雜度低（npx 就得）中等（要安裝擴展）
功能覆蓋以除錯為主通用瀏覽器自動化
適用場景開發者除錯通用任務自動化
       
     

4.3 Chrome DevTools MCP vs Claude in Chrome

       
                                           
維度Chrome DevTools MCPClaude in Chrome
發佈方Google Chrome 團隊Anthropic
整合方式MCP 協議Chrome 擴展
AI 模型支援多種 AI只支援 Claude
功能範圍除錯 + 性能分析通用瀏覽器控制
Token 消耗中等高
       
     

結論：

  • • 用多種 AI 工具 → Chrome DevTools MCP
  • • 只用 Claude → Claude in Chrome

4.4 Token 效率對比（關鍵數據）

根據社羣測試：

  • • OpenBrowser MCP：3.2x 更高效
  • • Playwright MCP：6x 更高效
  • • Chrome DevTools MCP：基準

結論：Chrome DevTools MCP 喺除錯場景最強，但 Token 消耗較高。

五、行動清單：即刻可以做嘅 3 件事

行動 1：配置 Chrome DevTools MCP

時間：5 分鐘

步驟：

  1. 1. npm install -g chrome-devtools-mcp
  2. 2. 編輯 Claude Desktop 設定檔
  3. 3. 重開 Claude Desktop
  4. 4. 測試：叫 AI 檢查 web.dev 嘅 LCP

行動 2：實戰練習 3 個案例

時間：30 分鐘

案例：

  1. 1. 表單自動填寫（10 分鐘）
  2. 2. 性能診斷（10 分鐘）
  3. 3. 網絡請求除錯（10 分鐘）

目標：熟習 AI 控制瀏覽器嘅工作流程

行動 3：對比測試 Token 消耗

時間：15 分鐘

步驟：

  1. 1. 用 Chrome DevTools MCP 執行一個任務
  2. 2. 用 Playwright MCP 執行相同任務
  3. 3. 對比 Token 消耗
  4. 4. 選擇更適合你嘅方案

總結

Chrome DevTools MCP 嘅價值：

  • • 終結 AI「盲編程」時代
  • • 令 AI 睇到真實嘅瀏覽器環境
  • • 自然語言控制，唔使手寫選擇器

核心優勢：

  • • 官方支援（Google Chrome 團隊維護）
  • • 除錯能力強大（完整 DevTools 功能）
  • • 多 AI 工具兼容（Claude、Gemini、Cursor）

適用場景：

  • • 前端開發除錯
  • • 性能分析
  • • 網絡請求除錯
  • • UI 測試自動化

侷限：

  • • 只支援 Chrome（可以用 Playwright MCP 補充）
  • • Token 消耗較高
  • • 需要本地 Chrome 環境

下一步：

  1. 1. 配置 Chrome DevTools MCP
  2. 2. 練習 3 個實戰案例
  3. 3. 對比測試 Token 消耗
  4. 4. 選擇最適合你嘅工具組合

資源：

  • • 官方 blog：https://developer.chrome.com/blog/chrome-devtools-mcp
  • • GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp
  • • MCP 協議：https://modelcontextprotocol.info/
                 

開篇：為什麼需要 Chrome DevTools MCP？

你有沒有遇到過這種情況：

前端頁面出了 Bug，你讓 AI 幫你調試。結果 AI 只能根據你粘貼的代碼片段猜測問題，根本看不到真實的瀏覽器環境。

或者你想讓 AI 幫你自動化測試，但得手寫一堆選擇器、定位代碼，AI 根本不知道頁面上到底有什麼元素。

Chrome DevTools MCP 就是為了解決這個問題而生的。

它讓 AI 能直接看到瀏覽器裏的真實情況：DOM 結構、CSS 樣式、網絡請求、性能指標。AI 不再是"盲編程"，而是能像你一樣打開 DevTools 調試。

核心價值：

  • • 結束 AI "盲編程" 時代
  • • 讓 AI 能看到真實的瀏覽器行為
  • • 自然語言控制瀏覽器，無需手寫選擇器

一、技術原理：MCP + CDP 雙層架構

1.1 什麼是 MCP？

MCP (Model Context Protocol) 是 Anthropic 在 2024 年底提出的標準化協議，用於連接 AI 模型和外部工具。

為什麼需要 MCP？

以前，每個 AI 工具都有自己的插件系統：

  • • Claude 有 Claude 插件
  • • Cursor 有 Cursor 擴展
  • • Gemini 有 Gemini 工具

結果就是：同一個功能，要為不同的 AI 寫不同的集成代碼。

MCP 的解決方案：

  • • 統一接口：寫一次 MCP server，所有 AI 工具都能用
  • • 標準化：工具定義、調用、返回都是結構化的
  • • 解耦：AI 工具和外部工具通過 MCP 協議通信

1.2 什麼是 CDP？

CDP (Chrome DevTools Protocol) 是 Chrome 瀏覽器的底層調試協議。

它能幹什麼？

  • • 檢查和修改 DOM
  • • 獲取和設置 CSS 樣式
  • • 監控網絡請求
  • • 錄製性能追蹤
  • • 執行 JavaScript
  • • 設置斷點、調試代碼

應用場景：

  • • Puppeteer（Node.js 自動化庫）
  • • Cypress（測試框架）
  • • Playwright（跨瀏覽器自動化）

1.3 雙層架構

AI Agent (Claude/Cursor/Gemini)
    ↓ MCP 協議（標準化接口）
Chrome DevTools MCP Server
    ↓ CDP 協議（Chrome 調試接口）
Chrome Browser
    ↓ WebSocket/stdio
真實瀏覽器實例

工作流程：

  1. 1. 你對 AI 說："檢查 web.dev 的 LCP"
  2. 2. AI 通過 MCP 協議調用 Chrome DevTools MCP
  3. 3. MCP server 通過 CDP 協議控制 Chrome
  4. 4. Chrome 執行操作，返回性能數據
  5. 5. MCP server 把結果返回給 AI
  6. 6. AI 把結果告訴你

關鍵組件：

  • • MCP Server：標準化接口，所有 AI 工具通用
  • • CDP：Chrome 的底層能力
  • • 瀏覽器實例：真實運行 Chrome

二、配置教程：主流工具集成

2.1 Claude Desktop 配置

步驟 1：安裝 Chrome DevTools MCP

npm install -g chrome-devtools-mcp

步驟 2：編輯配置文件

macOS 路徑：~/Library/Application Support/Claude/claude_desktop_config.json

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

步驟 3：重啓 Claude Desktop

步驟 4：測試

在 Claude 中輸入：

Please check the LCP of web.dev

如果 Claude 能返回性能數據，說明配置成功。

2.2 Cursor 配置

步驟 1：打開 Cursor 設置 → MCP Servers

步驟 2：添加配置

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

步驟 3：重啓 Cursor

步驟 4：在 Copilot Chat 中使用

輸入 # 查看所有可用工具，找到 Chrome DevTools 相關的工具。

2.3 Gemini CLI 配置

一行命令：

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

驗證：

gemini chat
> Please check the LCP of web.dev

2.4 VS Code 配置

步驟 1：安裝 MCP 擴展

步驟 2：編輯 mcp.json

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

步驟 3：重啓 VS Code

三、實戰案例：6 個應用場景

案例 1：表單自動填充

場景：自動填寫登錄表單

傳統方式：

// 手寫選擇器
await page.locator('input[type="email"]').fill('test@example.com');
await page.locator('input[type="password"]').fill('testpass123');
await page.locator('button[type="submit"]').click();

Chrome DevTools MCP 方式：

你：Fill out the sign-in form with email test@example.com and password testpass123

AI：
1. 找到郵箱輸入框 → 輸入 test@example.com
2. 找到密碼輸入框 → 輸入 testpass123
3. 找到提交按鈕 → 點擊

優勢：

  • • 無需手寫選擇器，AI 自動識別元素
  • • 支持複雜表單（下拉框、多選框、日期選擇器）

案例 2：性能問題診斷

場景：分析頁面 LCP（Largest Contentful Paint）

你：Check the LCP of web.dev

AI：
1. 打開 web.dev
2. 開始性能追蹤
3. 等待頁面加載完成
4. 停止追蹤
5. 獲取 LCP 指標

結果：
LCP: 1.2s
FID: 45ms
CLS: 0.05
建議：圖片優化、減少 JavaScript 阻塞

實際應用：

  • • 快速診斷性能瓶頸
  • • 對比優化前後效果
  • • 生成性能報告

案例 3：網絡請求調試

場景：發現某個 API 請求失敗，讓 AI 分析原因

你：Why is my API call failing?

AI：
1. 讀取網絡日誌
2. 找到失敗的請求
3. 分析請求詳情（headers、response、status code）
4. 診斷原因

結果：
請求：POST /api/user
狀態碼：403 Forbidden
原因：CORS 配置錯誤
建議：在後端添加 Access-Control-Allow-Origin 頭

案例 4：跨瀏覽器測試

場景：測試頁面在不同瀏覽器中的表現

你：Compare how this page renders in Firefox and WebKit

AI：
1. 在 Firefox 中打開頁面 → 截圖
2. 在 WebKit 中打開頁面 → 截圖
3. 對比兩張截圖
4. 報告差異

注意：跨瀏覽器測試需要 Playwright MCP，Chrome DevTools MCP 僅支持 Chrome。

案例 5：批量數據提取

場景：從網頁中提取結構化數據

你：Extract all product names and prices from this e-commerce page

AI：
1. 找到所有商品元素
2. 遍歷每個元素
3. 提取名稱和價格
4. 返回 JSON 格式數據

結果：
[
  {"name": "iPhone 15", "price": "$999"},
  {"name": "MacBook Pro", "price": "$1999"},
  ...
]

實際應用：

  • • GitHub star 整理
  • • 電商價格監控
  • • 新聞聚合

案例 6：UI 測試自動化

場景：自動化測試用戶註冊流程

你：Test the user registration flow

AI：
1. 打開註冊頁面
2. 填寫表單
3. 提交
4. 驗證是否跳轉到成功頁面
5. 檢查是否有錯誤提示

結果：
✅ 表單填寫成功
✅ 提交成功
✅ 跳轉到成功頁面
❌ 發現錯誤：密碼強度提示未顯示

四、工具對比：哪個更適合你？

4.1 Chrome DevTools MCP vs Playwright MCP

       
                                           
維度Chrome DevTools MCPPlaywright MCP
底層協議CDPPlaywright API
瀏覽器支持僅 Chrome/ChromiumChrome、Firefox、WebKit
Token 效率中等高（3.2x 更高效）
調試能力強（完整 DevTools 功能）中等
學習曲線低（自然語言即可）中等（需瞭解 Playwright）
適用場景調試、性能分析、前端開發跨瀏覽器測試、E2E 測試
       
     

結論：

  • • 需要調試 → Chrome DevTools MCP
  • • 需要跨瀏覽器測試 → Playwright MCP

4.2 Chrome DevTools MCP vs Browser MCP

       
                                           
維度Chrome DevTools MCPBrowser MCP
實現方式Chrome 擴展 + MCP serverChrome 擴展 + MCP server
性能中等高（本地自動化）
安裝複雜度低（npx 即可）中等（需安裝擴展）
功能覆蓋調試為主通用瀏覽器自動化
適用場景開發者調試通用任務自動化
       
     

4.3 Chrome DevTools MCP vs Claude in Chrome

       
                                           
維度Chrome DevTools MCPClaude in Chrome
發佈方Google Chrome 團隊Anthropic
集成方式MCP 協議Chrome 擴展
AI 模型支持多種 AI僅 Claude
功能範圍調試 + 性能分析通用瀏覽器控制
Token 消耗中等高
       
     

結論：

  • • 用多種 AI 工具 → Chrome DevTools MCP
  • • 只用 Claude → Claude in Chrome

4.4 Token 效率對比（關鍵數據）

根據社區測試：

  • • OpenBrowser MCP：3.2x 更高效
  • • Playwright MCP：6x 更高效
  • • Chrome DevTools MCP：基準

結論：Chrome DevTools MCP 在調試場景最強，但 Token 消耗較高。

五、行動清單：立即可做的 3 件事

行動 1：配置 Chrome DevTools MCP

時間：5 分鐘

步驟：

  1. 1. npm install -g chrome-devtools-mcp
  2. 2. 編輯 Claude Desktop 配置文件
  3. 3. 重啓 Claude Desktop
  4. 4. 測試：讓 AI 檢查 web.dev 的 LCP

行動 2：實戰練習 3 個案例

時間：30 分鐘

案例：

  1. 1. 表單自動填充（10 分鐘）
  2. 2. 性能診斷（10 分鐘）
  3. 3. 網絡請求調試（10 分鐘）

目標：熟悉 AI 控制瀏覽器的工作流

行動 3：對比測試 Token 消耗

時間：15 分鐘

步驟：

  1. 1. 用 Chrome DevTools MCP 執行一個任務
  2. 2. 用 Playwright MCP 執行相同任務
  3. 3. 對比 Token 消耗
  4. 4. 選擇更適合你的方案

總結

Chrome DevTools MCP 的價值：

  • • 結束 AI "盲編程" 時代
  • • 讓 AI 能看到真實的瀏覽器環境
  • • 自然語言控制，無需手寫選擇器

核心優勢：

  • • 官方支持（Google Chrome 團隊維護）
  • • 調試能力強大（完整 DevTools 功能）
  • • 多 AI 工具兼容（Claude、Gemini、Cursor）

適用場景：

  • • 前端開發調試
  • • 性能分析
  • • 網絡請求調試
  • • UI 測試自動化

侷限：

  • • 僅支持 Chrome（可通過 Playwright MCP 彌補）
  • • Token 消耗較高
  • • 需要本地 Chrome 環境

下一步：

  1. 1. 配置 Chrome DevTools MCP
  2. 2. 練習 3 個實戰案例
  3. 3. 對比測試 Token 消耗
  4. 4. 選擇最適合你的工具組合

資源：

  • • 官方博客：https://developer.chrome.com/blog/chrome-devtools-mcp
  • • GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp
  • • MCP 協議：https://modelcontextprotocol.info/