Chrome DevTools MCP - AI 編程助手的瀏覽器控制工具

專案概述

Chrome DevTools MCP 是一個官方的 Model Context Protocol (MCP) 伺服器，它讓 AI 編程助手（如 Gemini、Claude、Cursor 或 Copilot）能夠控制和檢查即時運行的 Chrome 瀏覽器。該工具為 AI 編碼助手提供了 Chrome DevTools 的全部功能，用於可靠的自動化、深度除錯和效能分析。

GitHub 地址: https://github.com/ChromeDevTools/chrome-devtools-mcp

核心特性

1. 效能洞察

• 使用 Chrome DevTools 記錄效能追蹤
• 提取可操作的效能優化建議
• 幫助 AI 助手識別效能瓶頸

2. 進階瀏覽器除錯

• 分析網路請求
• 擷取螢幕截圖
• 檢查瀏覽器主控台輸出
• 檢測 CORS 問題和主控台錯誤

3. 可靠的自動化

• 基於 Puppeteer 實現瀏覽器自動化
• 自動等待操作結果
• 支援表單填寫、頁面導覽、元素互動

主要功能分類

Chrome DevTools MCP 伺服器提供了 26 個工具，分為以下幾類：

輸入自動化（7個工具）

• 點擊、填寫表單、輸入文字
• 懸停、鍵盤操作等互動功能

導覽自動化（7個工具）

• 頁面導覽、前進後退
• 重新整理、等待載入完成

模擬功能（3個工具）

• 裝置模擬
• 地理位置模擬
• 網路條件模擬

效能分析（3個工具）

• 效能追蹤記錄
• 效能指標分析
• 優化建議生成

網路監控（2個工具）

• 網路請求列表
• 請求詳情查看

除錯工具（4個工具）

• 主控台訊息查看
• JavaScript 執行
• 截圖功能
• DOM 檢查

系統要求

• Node.js: 20 或更新的 LTS 版本
• Chrome: 目前穩定版或更新版本
• npm: 套件管理器

安裝配置

通用配置

在你的 MCP 用戶端配置文件中添加以下內容：

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

支援的 AI 編程助手

Claude Code

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

Cursor

透過 Cursor 設定介面：Settings -> MCP -> New MCP Server，使用上述配置

Gemini CLI

# 專案級別
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# 全局安裝
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

按照 Cline 的 MCP 配置指南使用標準配置

配置選項

Chrome DevTools MCP 支援以下配置參數：

參數	類型	預設值	說明
--headless	boolean	false	是否以無頭模式運行（無 UI）
--isolated	boolean	false	建立臨時使用者資料目錄，關閉後自動清理
--channel	string	stable	Chrome 版本頻道（stable/canary/beta/dev）
--viewport	string	-	初始視口大小，如 1280x720
--executablePath / -e	string	-	自定義 Chrome 可執行檔路徑
--browserUrl / -u	string	-	連接到運行中的 Chrome 實例
--proxyServer	string	-	代理伺服器配置
--acceptInsecureCerts	boolean	false	忽略自簽名和過期憑證錯誤（謹慎使用）
--logFile	string	-	除錯日誌文件路徑

配置示例

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

使用示例

基礎測試

安裝完成後，在你的 AI 助手中輸入以下提示進行測試：

Check the performance of https://developers.chrome.com

AI 助手會自動：

1. 打開 Chrome 瀏覽器
2. 導覽到指定網站
3. 記錄效能追蹤
4. 分析並提供效能優化建議

常見使用場景

1. 效能分析

分析 example.com 的載入效能並給出優化建議

2. 除錯網路問題

檢查 my-website.com 是否有 CORS 錯誤

3. 自動化測試

導覽到 demo.realworld.io，填寫登入表單並截圖

4. 表單填寫

在登入頁面填寫信箱 test@example.com 和密碼 testpass123

5. 主控台檢查

查看目前頁面的主控台錯誤訊息

工作原理

Chrome DevTools MCP 基於 Model Context Protocol (MCP) 標準工作：

1. MCP 協議: 開源標準，用於連接大型語言模型與外部工具和資料來源
2. 工具暴露: 透過 MCP 協議暴露 Chrome DevTools 功能作為工具
3. AI 調用: AI 助手根據使用者需求調用相應工具
4. 自動化執行: 使用 Puppeteer 在 Chrome 中執行操作
5. 結果返回: 將執行結果回饋給 AI 助手

示例流程

當你要求 AI 助手"檢查網站效能"時：

使用者: 檢查我的網站效能
  ↓
AI 助手: 使用 performance_start_trace 工具
  ↓
MCP 伺服器: 啟動 Chrome，打開網站，記錄效能追蹤
  ↓
AI 助手: 分析效能資料
  ↓
使用者: 收到效能分析報告和優化建議

資料目錄

Chrome DevTools MCP 使用以下使用者資料目錄：

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

資料目錄在運行之間不會被清除，除非使用 --isolated 選項。

安全注意事項

⚠️ 重要提示:

Chrome DevTools MCP 將瀏覽器實例的內容暴露給 MCP 用戶端，允許它們檢查、除錯和修改瀏覽器或 DevTools 中的任何資料。

請避免分享你不想與 MCP 用戶端共享的敏感或個人資訊。

故障排除

如果遇到問題，請查看官方的故障排除指南。

常見問題

1. 瀏覽器未自動啟動: MCP 伺服器僅在用戶端使用需要瀏覽器的工具時才會啟動瀏覽器
2. 沙箱權限問題: 如果 MCP 用戶端啟用了沙箱，可能需要禁用或使用 --connect-url 連接到手動啟動的 Chrome 實例
3. 啟動超時: 在 Windows 上可能需要增加 startup_timeout_ms 配置

技術棧

• 核心: Node.js
• 瀏覽器自動化: Puppeteer
• 協議: Chrome DevTools Protocol (CDP)
• 標準: Model Context Protocol (MCP)

專案特點

1. 官方支援: 由 Chrome DevTools 團隊官方開發和維護
2. 廣泛兼容: 支援多種主流 AI 編程助手
3. 功能全面: 提供 26 個工具覆蓋自動化、除錯、效能分析
4. 易於集成: 使用 npx 無需本地安裝，配置簡單
5. 活躍開發: 持續更新和改進功能

適用場景

• Web 開發除錯: AI 助手幫助識別和修復 bug
• 效能優化: 自動化效能分析和優化建議
• 自動化測試: 編寫和執行瀏覽器自動化測試
• 網站監控: 檢查網站功能和效能
• 開發驗證: 驗證程式碼更改在瀏覽器中的實際效果

反饋和貢獻

該專案處於公開預覽階段，Chrome DevTools 團隊正在積極尋求社區反饋：

• 如果有功能請求或發現問題，請在 GitHub Issues 提交
• 無論你是使用 AI 編程助手的開發者，還是建構下一代 AI 開發工具的供應商，你的見解都非常寶貴