Chrome DevTools MCP 安裝指南與使用

發表於 分類於

Chrome DevTools MCP 安裝指南與使用

簡介

什麼是 Chrome DevTools MCP？

chrome-devtools-mcp 是由 Google ChromeDevTools 官方團隊開發的 MCP（Model Context Protocol）伺服器。它讓 AI 程式輔助工具（如 GitHub Copilot、Claude、Cursor 等）能夠直接控制並檢查一個真實的 Chrome 瀏覽器，賦予 AI 完整的 Chrome DevTools 能力，從效能分析、網路監控到自動化操作，一應俱全。

核心特性

  • 效能分析：錄製 Performance Trace 並透過 Chrome DevTools 提取可執行的效能洞察
  • 進階除錯：分析網路請求、擷取截圖、查看 Console 訊息（含 Source Map 錯誤堆疊）
  • 可靠的自動化：基於 Puppeteer 進行 Chrome 自動化操作，並自動等待操作結果完成
  • Lighthouse 稽核：對網頁執行 Lighthouse 品質稽核，涵蓋效能、無障礙、SEO 等指標
  • 記憶體快照：擷取頁面記憶體快照，協助追蹤記憶體洩漏問題
  • 自動連線（autoConnect）：自動附加至已開啟的 Chrome 實例，保留原有的登入狀態與分頁

支援的 MCP 用戶端

  • GitHub Copilot / VS Code
  • Claude Desktop / Claude Code
  • Cursor
  • Gemini CLI / Gemini Code Assist
  • JetBrains AI Assistant
  • 以及更多支援 MCP 協議的工具

系統要求

項目 版本要求
Node.js v20.19 或更新的 LTS 版本
Chrome 穩定版（Stable）或更新版本
Chrome（autoConnect） M144 或更新版本
npm 隨 Node.js 一同安裝

前置需求：本文以 WSL2（Windows Subsystem for Linux） 搭配 VS Code Remote WSL 的環境為主，執行前請確認 WSL 環境中已安裝 Node.js v20.19 以上版本（含 npm / npx）。如尚未安裝，請參考 Node.js 官方文件 自行完成安裝。

啟用 Chrome 遠端除錯（autoConnect 模式）

官方文件：讓 Coding Agent 透過 Chrome 開發人員工具 MCP 偵錯瀏覽器工作階段

為什麼需要 autoConnect？

傳統上，chrome-devtools-mcp 會啟動一個全新的 Chrome 實例，使用獨立的使用者設定檔。這表示 AI 工具無法存取你平時的瀏覽器狀態，例如已登入的帳號、Cookie 或進行中的 DevTools 工作。

--autoConnect 模式解決了這個問題：

  • 沿用現有登入狀態：例如要讓 AI 偵錯需要登入才能存取的頁面，無需重新登入。
  • 接手進行中的 DevTools 工作階段：在 Chrome 的「網路」或「元素」面板中發現問題後，可直接將除錯工作交給 AI 接手分析。

運作原理

整個遠端除錯的流程分為三個階段：

  1. 啟用：在 chrome://inspect/#remote-debugging 頁面開啟遠端除錯功能（一次性設定）。
  2. 授權：每當 MCP 伺服器要求連線時，Chrome 會彈出確認對話框，需手動點擊「Allow」。
  3. 除錯中提示：連線成功後，Chrome 頂端會顯示「Chrome 目前受到自動測試軟體控制」橫幅，提醒目前處於遠端除錯工作階段。

Chrome 遠端除錯流程：啟用 → 確認連線要求 → 顯示除錯工作階段橫幅

需求：此功能需要 Chrome M144 以上版本，目前請確認使用的是最新穩定版 Chrome。

步驟 1：在 Chrome 中啟用遠端除錯

  1. 開啟 Windows 上的 Google Chrome，在網址列輸入：

    1
    chrome://inspect/#remote-debugging

  2. 頁面會顯示遠端除錯的設定區塊，依照畫面指示的對話框，選擇允許連入的除錯連線。

在 Chrome 中啟用遠端除錯功能的設定頁面截圖

說明：這是一次性設定。完成後，後續每次 MCP 伺服器嘗試建立連線時，Chrome 才會逐次彈出授權確認視窗。

步驟 2：授權 MCP 伺服器連線

當 AI 工具第一次發送需要瀏覽器的請求時，Chrome 會彈出確認對話框：

Chrome 對話框，要求使用者啟用遠端除錯工作階段

點擊「Allow（允許）」後，MCP 伺服器便會接管目前的 Chrome 實例，開始執行 AI 工具所要求的操作。

在 Copilot CLI 中設定 chrome-devtools-mcp

方式 A：使用互動指令新增（推薦）

啟動 Copilot CLI 的互動模式後，使用內建的 /mcp add 指令新增伺服器：

  1. 進入互動模式後，輸入 /mcp add，畫面會顯示設定表單，按 Tab 切換欄位。
  2. Server Name：輸入 chrome-devtools
  3. Server Type：選擇 Local 或 STDIO
  4. Command：輸入以下完整指令（包含引數）：
    1
    npx chrome-devtools-mcp@latest --autoConnect
  5. Tools：輸入 *（開放所有工具）
  6. 按下 Ctrl+S 儲存，伺服器立即生效，無需重啟 CLI。

方式 B：直接編輯設定檔

編輯 ~/.copilot/mcp-config.json，加入以下設定：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "mcpServers": {
    "chrome-devtools": {
      "type": "local",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect"
      ],
      "env": {},
      "tools": ["*"]
    }
  }
}

說明：

  • type: "local" 對應 STDIO 模式，與 VS Code、Copilot coding agent 等用戶端相容。
  • chrome-devtools-mcp@latest 每次執行時會自動使用最新版本，確保功能最新。
  • --autoConnect 讓 MCP 伺服器自動連線至 Windows 上已開啟的 Chrome 實例，保留原有登入狀態與分頁，特別適合需要在已登入帳號的網站進行測試的場景。

步驟 2：確認 Chrome 已開啟

確認 Windows 上的 Chrome 正在執行。MCP 伺服器啟動後不會自動開啟瀏覽器，而是等到 Copilot CLI 發出第一個需要瀏覽器的請求時，才連線至 Chrome。

管理 MCP 伺服器

可在 Copilot CLI 互動模式中使用以下指令管理已設定的伺服器：

指令 說明
/mcp show 列出所有已設定的 MCP 伺服器及其狀態
/mcp show chrome-devtools 查看指定伺服器的詳情與工具清單
/mcp edit chrome-devtools 編輯指定伺服器的設定
/mcp disable chrome-devtools 停用伺服器（設定保留但不使用）
/mcp enable chrome-devtools 重新啟用已停用的伺服器
/mcp delete chrome-devtools 刪除伺服器設定

驗證 Copilot CLI 是否成功連線至 MCP 伺服器後，畫面會顯示類似以下的訊息：

在 Copilot CLI 中使用

MCP 伺服器設定完成後，啟動 Copilot CLI 互動模式，即可使用自然語言讓 AI 控制瀏覽器。

驗證安裝是否成功

輸入以下提示詞，測試 MCP 伺服器是否正常連線：

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

Copilot 應會開啟瀏覽器並錄製 Performance Trace，最後輸出效能分析報告。

工具分類總覽

chrome-devtools-mcp 提供以下分類的工具（共 29 個）：

分類 工具數量 說明
輸入自動化 9 個 click、fill、fill_form、hover、press_key、type_text、drag、handle_dialog、upload_file
導航自動化 6 個 navigate_page、new_page、close_page、list_pages、select_page、wait_for
裝置模擬 2 個 emulate（模擬裝置/網路）、resize_page
效能分析 4 個 performance_start_trace、performance_stop_trace、performance_analyze_insight、take_memory_snapshot
網路監控 2 個 list_network_requests、get_network_request
除錯工具 6 個 take_screenshot、take_snapshot、evaluate_script、list_console_messages、get_console_message、lighthouse_audit

常用設定選項

可透過在 args 中追加參數來調整 MCP 伺服器行為：

參數 說明 預設值
--autoConnect 自動連線至已開啟的 Chrome（需 M144+） false
--headless 以無介面模式啟動 Chrome false
--isolated 使用獨立的暫存 user-data-dir，關閉後自動清除 false
--channel 指定 Chrome 頻道：stable、canary、beta、dev stable
--viewport 設定初始視窗大小，例如 1280x720 —
--slim 僅開放 3 個基本工具（導航、截圖、執行腳本） false
--no-usage-statistics 停用 Google 使用統計資料收集 預設啟用
--no-performance-crux 停用傳送 URL 至 CrUX API 取得真實使用者資料 預設啟用

使用範例：Slim 模式（僅基本功能）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "mcpServers": {
    "chrome-devtools": {
      "type": "local",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--slim",
        "--headless"
      ],
      "env": {},
      "tools": ["*"]
    }
  }
}

注意事項

  • chrome-devtools-mcp 官方僅支援 Google Chrome 與 Chrome for Testing，其他 Chromium 系瀏覽器可能無法保證正常運作。
  • 使用 --autoConnect 時，MCP 伺服器可以存取 Chrome 中所有已開啟的分頁，請避免在遠端除錯連線開啟期間瀏覽含有敏感資訊的網站。
  • 效能工具預設會傳送網址至 Google CrUX API 取得真實使用者體驗資料；如需關閉，請加入 --no-performance-crux 參數。
  • 使用統計資料預設啟用；使用 --no-usage-statistics 或設定環境變數 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1 可停用。