讓客服人員使用 Chrome DevTools MCP 檢查您的網站及 WebView2 應用程式

Chrome DevTools for agents (chrome-devtools-mcp) 讓你的程式代理程式 (Copilot、Antigravity、Claude 或游標) 控制並檢查基於Chromium的即時瀏覽器，包括 Microsoft Edge 和 WebView2。

詳細內容：

簡介

Chrome DevTools for agents (chrome-devtools-mcp) 讓你的程式代理程式 (Copilot、Antigravity、Claude 或游標) 控制並檢查基於Chromium的即時瀏覽器，包括 Microsoft Edge 和 WebView2。

Chrome DevTools for agents 作為 MCP) 伺服器 (模型-情境協議，讓你的 AI 編碼助理能完整使用 Microsoft Edge DevTools 的強大功能，實現可靠的自動化、深入除錯與效能分析。

Chrome DevTools MCP 伺服器支援連接任何基於 Chromium 的瀏覽器，包括 Microsoft Edge 和 WebView2。 因為伺服器是為 Google Chrome 瀏覽器設計的，你需要額外設定，才能將伺服器指向 Microsoft Edge 或 WebView2 實例。

本指南涵蓋三種情境：

另請參閱:

必要條件

  • Node.js，最新的 Long-Term 支援 (LTS) 版本。
  • NPM。
  • Microsoft Edge 安裝 (任何頻道：Stable、Beta、Dev 或 Canary) 。
  • 支援 Model-Context-Protocol (MCP 的編碼代理) ，例如 Microsoft Visual Studio Code (with GitHub Copilot) 、Copilot CLI、Claude Code 或游標。

本指南中的範例使用 VS Code mcp.json 格式。 如果你使用的是其他 MCP 用戶端，請參考下方的 「配置其他 MCP 用戶端」。

發射邊緣

使用此設定讓您的程式代理程式自動啟動 Microsoft Edge。

在此配置下，Model-Context-Protocol (MCP) 伺服器（代理連接的伺服器）會利用 --executablePath 指向 Edge 二進位檔的旗標啟動 Edge。

把你平台的設定片段複製貼上到你的 VS Code mcp.json裡。 這些例子使用 Edge Stable。

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe"
      ]
    }
  }
}

啟動 Edge 的額外旗幟

你可以搭配以下旗幟：--executablePath

  • --headless — 在沒有可見瀏覽器視窗的情況下執行
  • --isolated — 使用臨時的個人檔案目錄 (在關閉時清理)
  • --viewport=1280x720 — 設定初始視窗大小

無頭且隔離的 Windows () 範例：

"args": [
  "-y",
  "chrome-devtools-mcp@latest",
  "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe",
  "--headless",
  "--isolated"
]

每個 Edge 通道的可執行路徑

使用你頻道 Edge 的適當 --executablePath 數值。

這些是預設的安裝位置。 路徑可能依使用者設定、版本或群組政策而異。

通道 預設路徑
穩定 %ProgramFiles(x86)%\Microsoft\Edge\Application\msedge.exe
Beta 版 %ProgramFiles(x86)%\Microsoft\Edge Beta\Application\msedge.exe
開發人員 %ProgramFiles(x86)%\Microsoft\Edge Dev\Application\msedge.exe
Canary %LOCALAPPDATA%\Microsoft\Edge SxS\Application\msedge.exe

自動連接正在執行的 Edge 實例

請使用以下設定自動連接已運行中的 Microsoft Edge 實例。

自動連接已執行的 Edge 實例很有用：

  • 當你想在手動測試和代理驅動測試之間維持瀏覽器狀態時，
  • 當你需要登入網站時。
    • 例如，當你需要登入一個擁有複雜認證流程的網站，而這在傳統網路自動化中很難做到。
  • 當你想檢查現有的會話時，

警告

使用自動連線時，您的客服人員會繼承您的活躍會話，包括已登入的帳號、Cookie 以及透過 JavaScript API 呈現的其他資料。 這可能會讓代理人暴露個人識別資訊 (個人識別資訊) 。 只有在你信任的經紀人身上才使用這個模式，並且小心你的提示。

步驟 1：在 Edge 啟用遠端除錯

有兩種選擇：

選項A： 啟動 Microsoft Edge 時使用遠端除錯標誌：

msedge.exe --remote-debugging-port=9222

選項B： 在「 使用邊緣開發者工具檢查 」特別頁面中，啟用遠端除錯，如下：

  1. 在執行中的 Microsoft Edge 實例中，請前往 edge://inspect。

    開啟 了「使用 Edge 開發者工具檢查 」頁面，最初顯示的是 裝置 頁面。

  2. 在左側點選遠端 除錯。

    遠端 除錯 頁面會打開。

  3. 選擇 允許此瀏覽器實例遠端除錯 的勾選框：

    檢查頁面

步驟 2：設定 MCP 伺服器

要設定 MCP) 伺服器 (模型上下文協定，請結合--autoConnect--user-data-dir指向您的 Microsoft Edge 使用者資料目錄。 這些範例使用Edge Stable通道。

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--user-data-dir=%LocalAppData%\\Microsoft\\Edge\\User Data"
      ]
    }
  }
}

步驟三：測試你的設備

確認 Edge 正在執行Microsoft，然後在你的 MCP) 用戶端的 Model-Context-Protocol (輸入以下提示：

Navigate to https://contoso.com and take a screenshot

MCP 伺服器應該會連接到你正在執行的 Edge 實例並執行該指令。

每個 Edge 通道的使用者資料目錄

為你的頻道使用適當的 --user-data-dir 數值。

這些是預設的位置。 路徑可能依使用者設定、版本或群組政策而異。

通道 預設路徑
穩定 %LOCALAPPDATA%\Microsoft\Edge\User Data
Beta 版 %LOCALAPPDATA%\Microsoft\Edge Beta\User Data
開發人員 %LOCALAPPDATA%\Microsoft\Edge Dev\User Data
Canary %LOCALAPPDATA%\Microsoft\Edge SxS\User Data

自動連接 WebView2 實例

WebView2 沒有「啟動」情境;相反地，主機應用程式會建立 WebView2 實例。

MCP 伺服器透過自動連線連接到 WebView2 實例，類似於上述 自動連接執行中的 Edge 實例。

步驟 1：啟用 WebView2 的遠端除錯

你需要設定 WebView2 執行時，從 開始。--remote-debugging-port=0 有兩種方式可以做到：WebView2Utilities，或是 Windows 登錄檔。

透過使用 WebView2Utilities

許多應用程式會阻擋終端使用者開啟 DevTools。 作為開發者，你可以使用 WebView2Utilities 在建立 WebView2 時自動開啟 DevTools，具體如下。

  1. 安裝並執行 WebView2Utilities。

  2. 在 WebView2Utilities 中，選擇 「覆蓋」 標籤。

  3. 點擊左下角的 新增 按鈕。

  4. 選擇列表中新增的條目。

  5. 將主機應用程式的執行檔文字框改為你主機應用程式的可執行檔名稱，例如 OUTLOOK.EXE。

  6. 在瀏覽器參數區塊的參數文字框中，輸入：--remote-debugging-port=0

  7. 如果你的主機應用程式正在執行，請關閉主機應用程式。

  8. 重新啟動你的主機應用程式。

    當主機應用程式建立 WebView2 時，它會自動開啟 DevTools。

另請參閱:

透過使用 Windows 登錄檔

在此方法中，你會建立一個登錄值來設定 AdditionalBrowserArguments。 請將 WebView2 主機執行檔名稱替換 appname.exe 為：

[HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments]
"appname.exe"="--remote-debugging-port=0"

關於 和 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS的資訊additionalBrowserArguments，請參閱 WebView2 Win32 API 參考中的全域。

步驟 2：尋找 WebView2 使用者資料目錄

你需要找到主機應用程式的使用者資料目錄。

使用者資料目錄的路徑以 結尾。\EBWebView \EBWebView這個後綴會由 WebView2 執行時自動加入。 如果你是從原始碼複製使用者資料路徑，可能需要加上 \EBWebView。

你可以透過 WebView2Utilities 找到使用者資料目錄的路徑：在 Host Apps 標籤中，選擇你正在執行的主機應用程式，然後查看 User data 資料夾 列。

步驟 3：設定 MCP 伺服器

要配置 MCP) 伺服器 (模型-情境協定，請結合--autoConnect--user-data-dir指向 WebView2 使用者資料目錄：

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--user-data-dir=%LocalAppData%\\Packages\\<APP_PACKAGE>\\LocalState\\EBWebView"
      ]
    }
  }
}

用你主機應用程式的套件名稱替換 <APP_PACKAGE> 。

步驟四：測試你的設備

啟動你的 WebView2 主機應用程式，然後用你的 MCP 客戶端與 WebView2 主機應用程式互動。

例如，可以提示你的 AI 程式代理： Take a snapshot of the current page

運作方式

在底層，Chrome DevTools MCP 伺服器使用 Puppeteer 來控制瀏覽器。 當你輸入 --executablePath時，Puppeteer 會直接啟動該二進位檔，而不是搜尋瀏覽器。

當你提供 --autoConnect--user-data-dir時，伺服器會 DevToolsActivePort 從該目錄讀取檔案，找出執行中的瀏覽器的 WebSocket 端點並連接到它。

由於 Microsoft Edge 與 WebView2 基於 Chromium 瀏覽器引擎，DevTools 協定與 Microsoft Edge 及 WebView2 相容，MCP 工具運作如預期。

配置其他 MCP 用戶端

上述範例使用 Visual Studio Code mcp.json 格式。 以下是如何將上述範例調整至其他 MCP) 用戶端 (Model-Context-Protocol 的方法：

Copilot CLI

Copilot 的 CLI 會將設定儲存在 ~/.copilot/mcp-config.json。 格式使用 mcpServers (代替 servers) ， ("type": "local" 代替 "type": "stdio") ：

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "local",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe"
      ]
    }
  }
}

你也可以透過執行 copilot/mcp add然後 來互動式地新增 MCP 伺服器。

其他 MCP 用戶端，如 Claude Code、Cursor 或 Gemini CLI

大多數 MCP (Model-Context-Protocol) 用戶端使用不含type欄位的通用mcpServers格式：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe"
      ]
    }
  }
}

args陣列在所有用戶端間相同;只有包裝格式不同。 請參閱你 MCP 用戶端的文件，裡面有明確的設定檔位置和格式。

疑難排解

「無法連接 Chrome」錯誤，且自動連線

如果你使用自動連線並出現「無法連接 Chrome」的錯誤：

  • 確保 Microsoft Edge 正在執行，並且遠端除錯已啟用。

  • 確保 --user-data-dir 你的 Microsoft Edge 通道路徑正確。

  • 確保 DevToolsActivePort 該檔案存在於使用者資料目錄中。 當遠端除錯啟動時，檔案 DevToolsActivePort 會被建立。

邊緣未在 executablePath

  • 確保 executablePath Microsoft Edge 的通道存在於磁碟中。 例如，Windows 上的 Edge Canary 是按每個使用者 %LOCALAPPDATA%安裝，而不是在 \Program Files\。

  • 在 Windows 上，請在 JSON 字串中使用雙斜線 (\\) 。

WebView2 無法連線

  • 請確保登錄檔金鑰與你主機應用程式的執行檔名稱完全一致。

  • 加入 AdditionalBrowserArguments 登錄檔金鑰後，重新啟動主機應用程式。 應用程式名稱 .exe 的參數只會在 WebView2 建立時被讀取。

  • 確保 --user-data-dir 路徑以 為結尾 \EBWebView。

另請參閱

GitHub：

部落格：

  • 上次更新時間：