ChromeDevTools/chrome-devtools-mcp

用於代理的 Chrome DevTools (chrome-devtools-mcp)

是什麼 – 一個基於 Node 的伺服器，透過 Model‑Context‑Protocol (MCP) 暴露 Chrome DevTools 功能。它讓 AI 程式碼助手（Claude、Copilot、Cursor、Antigravity 等）能操控真實的 Chrome 瀏覽器：檢視頁面、記錄效能追蹤、除錯網路流量、截取螢幕截圖，並使用 Puppeteer 執行自動化操作。

為何重要 – 現代 AI 代理雖擅長產生程式碼，但仍需可靠方式與即時瀏覽器互動。透過使用 MCP，代理可要求工具「開啟此 URL 並給我一份效能報告」或「點擊此按鈕並回傳控制台輸出」，無需撰寫自訂的 Selenium 程式碼。伺服器負責處理繁重工作（啟動 Chrome、等待結果、將 DevTools 資料轉換為 JSON），讓代理能專注於高階推理。

核心功能

• 效能洞察 – 記錄 Chrome 追蹤資料，提取指標，並（可選）透過 CrUX API 补充真實使用者資料。
• 除錯工具 – 可存取網路日誌、控制台訊息（含來源對應的堆疊追蹤）與截圖。
• 可靠自動化 – 封裝 Puppeteer，自動執行點擊、導航、表單填寫等操作，並自動等待頁面穩定。
• MCP 接口 – 透過標準的 JSON over WebSocket 協定公開上述所有功能，AI 代理可將其作為工具呼叫。
• CLI 模式 – 一個獨立的命令列工具（npx chrome-devtools-mcp），無需 MCP 客戶端即可即時使用。

快速上手

1. 安裝 Node LTS 與最新穩定版 Chrome。
2. 將伺服器加入代理的 MCP 設定中，例如：

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

3. 在代理的提示中請求任務，例如 Check the performance of https://developers.chrome.com。伺服器將啟動 Chrome，記錄追蹤資料，並回傳分析結果。
4. 輕量使用時，使用 --slim --headless 啟動伺服器。

設定與進階用法 – 使用旗標控制無頭模式、隔離使用者資料目錄、並行會話、連接現有 Chrome 實例或 Android 除錯。完整清單請參閱連結文件。

隱私與資料 – 預設會傳送匿名使用統計資料，並可能查詢 CrUX API 以取得現場效能資料。可透過 --no-usage-statistics 或環境變數 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS / CI 關閉。

典型使用者 – 需要瀏覽網頁、分析頁面速度或除錯前端程式碼的 AI 驅動程式碼助手、IDE 延伸模組或自主代理的開發者。

---

所有細節均直接取自倉儲的 README。