From 28dedf8cd9b74b100d57befe842d26e53909077b Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 27 May 2026 17:08:05 -0700 Subject: [PATCH 01/13] draft doc --- microsoft-edge/devtools/agents/index.md | 11 + microsoft-edge/devtools/agents/mcp.md | 453 ++++++++++++++++++++++++ microsoft-edge/toc.yml | 12 + 3 files changed, 476 insertions(+) create mode 100644 microsoft-edge/devtools/agents/index.md create mode 100644 microsoft-edge/devtools/agents/mcp.md diff --git a/microsoft-edge/devtools/agents/index.md b/microsoft-edge/devtools/agents/index.md new file mode 100644 index 0000000000..e512e7f453 --- /dev/null +++ b/microsoft-edge/devtools/agents/index.md @@ -0,0 +1,11 @@ +--- +title: Index +description: Index. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 05/27/2026 +--- +# Index diff --git a/microsoft-edge/devtools/agents/mcp.md b/microsoft-edge/devtools/agents/mcp.md new file mode 100644 index 0000000000..b93d9823e8 --- /dev/null +++ b/microsoft-edge/devtools/agents/mcp.md @@ -0,0 +1,453 @@ +--- +title: Using Microsoft Edge and WebView2 with Chrome DevTools MCP +description: Using Microsoft Edge and WebView2 with Chrome DevTools MCP. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 05/27/2026 +--- +# Using Microsoft Edge and WebView2 with Chrome DevTools MCP + +The [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) server supports connecting to any Chromium-based browser, including Microsoft Edge and WebView2. Because the server is built for Chrome, you need to provide extra configuration to point the server at Microsoft Edge or a WebView2 instance. + +This guide covers three scenarios: + +1. [Launching Edge](#1-launching-edge) — the MCP server starts Edge for you. +1. [Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) — you start Edge yourself and the MCP server connects to it. +1. [Auto-connecting to WebView2](#3-auto-connecting-to-webview2) — the MCP server connects to a running WebView2 host app. + + + +## Prerequisites + +* [Node.js](https://nodejs.org) LTS version +* [npm](https://www.npmjs.com) +* Microsoft Edge installed (any channel: Stable, Beta, Dev, or Canary) +* An MCP client such as VS Code (with GitHub Copilot), Copilot CLI, Claude Code, Cursor, etc. + +> [!NOTE] +> The examples in this guide use the VS Code `mcp.json` format. If you're using a different MCP client, see [Configuring other MCP clients](#configuring-other-mcp-clients) at the end of this guide. + + + +## 1. Launching Edge + +In this mode, the MCP server launches Edge directly using the `--executablePath` flag pointed at your Edge binary. + +Copy and paste the configuration snippet for your platform into your VS Code `mcp.json`. These examples use Edge Stable. + +##### [Windows](#tab/windows/) + +```json +{ + "servers": { + "chrome-devtools": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe" + ] + } + } +} +``` + +##### [macOS](#tab/macos/) + +```json +{ + "servers": { + "chrome-devtools": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--executablePath=/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge" + ] + } + } +} +``` + +##### [Linux](#tab/linux/) + +```json +{ + "servers": { + "chrome-devtools": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--executablePath=/usr/bin/microsoft-edge" + ] + } + } +} +``` + +--- + + + +## Additional flags + +You can combine `--executablePath` with other flags: + +* `--headless` — run without a visible browser window +* `--isolated` — use a temporary profile directory (cleaned up on close) +* `--viewport=1280x720` — set initial viewport size + +Example with headless and isolated (Windows): + +```json +"args": [ + "-y", + "chrome-devtools-mcp@latest", + "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe", + "--headless", + "--isolated" +] +``` + + + +## Edge executable paths for other channels + +If you're not using Edge Stable, replace the `--executablePath` value with the appropriate path for your channel. + +##### [Windows](#tab/windows/) + +| Channel | Default Path | +|---|---| +| Stable | `%ProgramFiles(x86)%\Microsoft\Edge\Application\msedge.exe` | +| Beta | `%ProgramFiles(x86)%\Microsoft\Edge Beta\Application\msedge.exe` | +| Dev | `%ProgramFiles(x86)%\Microsoft\Edge Dev\Application\msedge.exe` | +| Canary | `%LOCALAPPDATA%\Microsoft\Edge SxS\Application\msedge.exe` | + +##### [macOS](#tab/macos/) + +| Channel | Default Path | +|---|---| +| Stable | `/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge` | +| Beta | `/Applications/Microsoft Edge Beta.app/Contents/MacOS/Microsoft Edge` | +| Dev | `/Applications/Microsoft Edge Dev.app/Contents/MacOS/Microsoft Edge` | +| Canary | `/Applications/Microsoft Edge Canary.app/Contents/MacOS/Microsoft Edge` | + +##### [Linux](#tab/linux/) + +| Channel | Default Path | +|---|---| +| Stable | `/usr/bin/microsoft-edge` | +| Beta | `/usr/bin/microsoft-edge-beta` | +| Dev | `/usr/bin/microsoft-edge-dev` | + +--- + +> [!NOTE] +> These are default install locations. Paths may vary based on user configuration, version, or group policies. Linux does not have a Canary channel. + + + +## 2. Auto-connecting to a running Edge instance + +In this mode, you start Edge yourself (or it's already running), and the MCP server connects to it. This is useful when: + +* You want to maintain browser state between manual testing and agent-driven testing. +* You need to be signed into a website that blocks automated browser launches. +* You want to inspect an existing session. + +> [!WARNING] +> When using auto-connect, your agent inherits your active session, including logged-in accounts, cookies, and other data surfaced through JavaScript APIs. This may expose Personally Identifiable Information (PII) to the agent. Only use this mode with agents you trust and be careful with your prompts. + + + +#### Step 1: Enable remote debugging in Edge + +You have two options: + +**Option A:** Start Edge with the remote debugging flag: + +`msedge.exe --remote-debugging-port=9222` + +**Option B:** In a running Edge instance, navigate to `edge://inspect/#remote-debugging` and enable remote debugging from that page. + + + +#### Step 2: Configure the MCP server + +Use `--autoConnect` combined with `--user-data-dir` pointing to your Edge user data directory. These examples use Edge Stable. + +##### [Windows](#tab/windows/) + +```json +{ + "servers": { + "chrome-devtools": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--autoConnect", + "--user-data-dir=%LocalAppData%\\Microsoft\\Edge\\User Data" + ] + } + } +} +``` + +##### [macOS](#tab/macos/) + +```json +{ + "servers": { + "chrome-devtools": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--autoConnect", + "--user-data-dir=~/Library/Application Support/Microsoft Edge" + ] + } + } +} +``` + +##### [Linux](#tab/linux/) + +```json +{ + "servers": { + "chrome-devtools": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--autoConnect", + "--user-data-dir=~/.config/microsoft-edge" + ] + } + } +} +``` + +--- + + + +#### Step 3: Test your setup + +Make sure Edge is running, then enter the following prompt in your MCP client: + +`Navigate to https://example.com and take a screenshot` + +The MCP server should connect to your running Edge instance and execute the command. + + + +#### Edge user data directories for other channels + +If you're not using Edge Stable, replace the `--user-data-dir` value with the appropriate path for your channel. + +##### [Windows](#tab/windows/) + +| Channel | Default Path | +|---|---| +| Stable | `%LOCALAPPDATA%\Microsoft\Edge\User Data` | +| Beta | `%LOCALAPPDATA%\Microsoft\Edge Beta\User Data` | +| Dev | `%LOCALAPPDATA%\Microsoft\Edge Dev\User Data` | +| Canary | `%LOCALAPPDATA%\Microsoft\Edge SxS\User Data` | + +##### [macOS](#tab/macos/) + +| Channel | Default Path | +|---|---| +| Stable | `~/Library/Application Support/Microsoft Edge` | +| Beta | `~/Library/Application Support/Microsoft Edge Beta` | +| Dev | `~/Library/Application Support/Microsoft Edge Dev` | +| Canary | `~/Library/Application Support/Microsoft Edge Canary` | + +##### [Linux](#tab/linux/) + +| Channel | Default Path | +|---|---| +| Stable | `~/.config/microsoft-edge` | +| Beta | `~/.config/microsoft-edge-beta` | +| Dev | `~/.config/microsoft-edge-dev` | + +> [!NOTE] +> These are default locations. Paths may vary based on user configuration, version, or group policies. Linux does not have a Canary channel. + + + +## 3. Auto-connecting to WebView2 + +WebView2 doesn't have a "launch" scenario — the host application creates the WebView2 instance. The MCP server connects to it via auto-connect, similar to the Edge scenario above. + + + +#### Step 1: Enable remote debugging for WebView2 + +You need to configure the WebView2 runtime to start with `--remote-debugging-port=0`. There are two ways to do this: + +**Option A: Using WebView2Utilities** + +Use WebView2Utilities and follow the How to: Auto open DevTools guide. Instead of checking the "Auto open DevTools" checkbox, type `--remote-debugging-port=0` in the Arguments textbox. + +**Option B: Via the Windows Registry** + +Create a registry value to set `AdditionalBrowserArguments`. Replace `appname.exe` with the name of your WebView2 host executable: + +``` +[HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments] +"appname.exe"="--remote-debugging-port=0" +``` + + + +#### Step 2: Find the WebView2 user data directory + +You need to discover the user data directory of the host app. The path should end with `EBWebView` — this suffix is automatically added by the WebView2 runtime. + +You can find this path using WebView2Utilities: go to the **Host Apps** tab, select your running host app, and look at the **User data folder** row. + +> [!NOTE] +> If you're copying the user data path from source code, you may need to append `\EBWebView` yourself since the runtime adds this automatically at runtime. + + + +#### Step 3: Configure the MCP server + +```json +{ + "servers": { + "chrome-devtools": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--autoConnect", + "--user-data-dir=%LocalAppData%\\Packages\\\\LocalState\\EBWebView" + ] + } + } +} +``` + +Replace `` with the package name of your host app. + + + +#### Step 4: Test your setup + +Launch your WebView2 host app, then use your MCP client to interact with it: + +`Take a snapshot of the current page` + + + +## How it works + +Under the hood, the Chrome DevTools MCP server uses [Puppeteer](https://github.com/puppeteer/puppeteer) to control the browser. When you provide `--executablePath`, Puppeteer launches that binary directly instead of searching for Chrome. When you provide `--autoConnect` with `--user-data-dir`, the server reads the `DevToolsActivePort` file from that directory to discover the WebSocket endpoint of the running browser and connects to it. + +Since Edge and WebView2 are Chromium-based, the DevTools Protocol is compatible and the MCP tools work as expected. + + + +## Configuring other MCP clients + +The examples above use the VS Code `mcp.json` format. Here's how to adapt them for other clients: + + + +#### Copilot CLI + +Copilot CLI stores its config in `~/.copilot/mcp-config.json`. The format uses `mcpServers` (instead of `servers`) and `"type": "local"` (instead of `"type": "stdio"`): + +```json +{ + "mcpServers": { + "chrome-devtools": { + "type": "local", + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe" + ] + } + } +} +``` + +You can also add an MCP server interactively by running `copilot` and then `/mcp add`. + + + +#### Other MCP clients (Claude Code, Cursor, Gemini CLI, etc.) + +Most MCP clients use the generic mcpServers format without a `type` field: + +```json +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe" + ] + } + } +} +``` + +The `args` array is the same across all clients — only the wrapper format differs. Refer to your MCP client's documentation for the exact config file location and format. + + + +## Troubleshooting + + + +#### "Could not connect to Chrome" error with auto-connect + +* Ensure Edge is running and remote debugging is enabled. +* Verify the `--user-data-dir` path is correct for your Edge channel. +* Check that DevToolsActivePort exists in the user data directory (it's created when remote debugging is active). + + + +#### Edge not found at executablePath + +* Verify the path exists on disk. Edge Canary on Windows installs per-user under `%LOCALAPPDATA%`, not in `Program Files`. +* On Windows, use double backslashes (`\\`) in JSON strings. + + + +#### WebView2 won't connect + +* Confirm the registry key matches your host app's executable name exactly. +* Restart the host app after adding the registry key — the argument is only read at WebView2 creation time. +* Ensure the `--user-data-dir` path ends with `EBWebView`. + + + +## Further reading + +* [Chrome DevTools MCP README](https://github.com/ChromeDevTools/chrome-devtools-mcp) +* [Edge and WebView2 in Chrome DevTools MCP](https://deletethis.net/dave/2026-03/edge-and-webview2-in-chrome-devtools-mcp/) — original blog post by David Risney +* [WebView2Utilities](https://github.com/david-risney/WebView2Utilities) — tool for managing WebView2 debugging +* [Chrome DevTools remote debugging documentation](https://developer.chrome.com/docs/devtools/remote-debugging/) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 80fa50269e..b583b4433d 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -1075,6 +1075,18 @@ href: ./devtools/accessibility/narrow.md displayName: Device Emulation, Device Emulator # /Accessibility +# ----------------------------------------------------------------------------- +# DevTools for agents + - name: DevTools for agents + items: + - name: Index + href: ./devtools/agents/index.md + displayName: + + - name: Using Microsoft Edge and WebView2 with Chrome DevTools MCP + href: ./devtools/agents/mcp.md + displayName: +# /DevTools for agents # ----------------------------------------------------------------------------- - name: Use DevTools in Internet Explorer mode (IE mode) href: ./devtools/ie-mode/index.md From 4fb04c25d34fa01c3f09850c2036eba522bc29f8 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 27 May 2026 17:15:28 -0700 Subject: [PATCH 02/13] localtoc --- microsoft-edge/devtools/agents/mcp.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/microsoft-edge/devtools/agents/mcp.md b/microsoft-edge/devtools/agents/mcp.md index b93d9823e8..b3064d7544 100644 --- a/microsoft-edge/devtools/agents/mcp.md +++ b/microsoft-edge/devtools/agents/mcp.md @@ -18,6 +18,31 @@ This guide covers three scenarios: 1. [Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) — you start Edge yourself and the MCP server connects to it. 1. [Auto-connecting to WebView2](#3-auto-connecting-to-webview2) — the MCP server connects to a running WebView2 host app. +**Detailed contents:** +* [Prerequisites](#prerequisites) +* [1. Launching Edge](#1-launching-edge) +* [Additional flags](#additional-flags) +* [Edge executable paths for other channels](#edge-executable-paths-for-other-channels) +* [2. Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) + * [Step 1: Enable remote debugging in Edge](#step-1-enable-remote-debugging-in-edge) + * [Step 2: Configure the MCP server](#step-2-configure-the-mcp-server) + * [Step 3: Test your setup](#step-3-test-your-setup) + * [Edge user data directories for other channels](#edge-user-data-directories-for-other-channels) +* [3. Auto-connecting to WebView2](#3-auto-connecting-to-webview2) + * [Step 1: Enable remote debugging for WebView2](#step-1-enable-remote-debugging-for-webview2) + * [Step 2: Find the WebView2 user data directory](#step-2-find-the-webview2-user-data-directory) + * [Step 3: Configure the MCP server](#step-3-configure-the-mcp-server) + * [Step 4: Test your setup](#step-4-test-your-setup) +* [How it works](#how-it-works) +* [Configuring other MCP clients](#configuring-other-mcp-clients) + * [Copilot CLI](#copilot-cli) + * [Other MCP clients (Claude Code, Cursor, Gemini CLI, etc.)](#other-mcp-clients-claude-code-cursor-gemini-cli-etc) +* [Troubleshooting](#troubleshooting) + * ["Could not connect to Chrome" error with auto-connect](#could-not-connect-to-chrome-error-with-auto-connect) + * [Edge not found at executablePath](#edge-not-found-at-executablepath) + * [WebView2 won't connect](#webview2-wont-connect) +* [Further reading](#further-reading) + ## Prerequisites From 8d41715f374af1b4b95e7e49dbb22caebdc838c3 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 27 May 2026 17:17:47 -0700 Subject: [PATCH 03/13] test-link not in Note --- microsoft-edge/devtools/agents/mcp.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/microsoft-edge/devtools/agents/mcp.md b/microsoft-edge/devtools/agents/mcp.md index b3064d7544..d4b6028baa 100644 --- a/microsoft-edge/devtools/agents/mcp.md +++ b/microsoft-edge/devtools/agents/mcp.md @@ -55,6 +55,8 @@ This guide covers three scenarios: > [!NOTE] > The examples in this guide use the VS Code `mcp.json` format. If you're using a different MCP client, see [Configuring other MCP clients](#configuring-other-mcp-clients) at the end of this guide. +todo: a test link not within a Note: [Configuring other MCP clients](#configuring-other-mcp-clients) + ## 1. Launching Edge From 1f322e7c394ee736aa1b3ef5733147b3c68d9682 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 27 May 2026 17:19:08 -0700 Subject: [PATCH 04/13] tabset termin --- microsoft-edge/devtools/agents/mcp.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/microsoft-edge/devtools/agents/mcp.md b/microsoft-edge/devtools/agents/mcp.md index d4b6028baa..d9b5535389 100644 --- a/microsoft-edge/devtools/agents/mcp.md +++ b/microsoft-edge/devtools/agents/mcp.md @@ -312,6 +312,8 @@ If you're not using Edge Stable, replace the `--user-data-dir` value with the ap | Beta | `~/.config/microsoft-edge-beta` | | Dev | `~/.config/microsoft-edge-dev` | +--- + > [!NOTE] > These are default locations. Paths may vary based on user configuration, version, or group policies. Linux does not have a Canary channel. From 94c129ebf1e98170bf7630476fb0b1de85c555ba Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 27 May 2026 17:26:26 -0700 Subject: [PATCH 05/13] del test-link --- microsoft-edge/devtools/agents/mcp.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/microsoft-edge/devtools/agents/mcp.md b/microsoft-edge/devtools/agents/mcp.md index d9b5535389..f1764f55ec 100644 --- a/microsoft-edge/devtools/agents/mcp.md +++ b/microsoft-edge/devtools/agents/mcp.md @@ -55,8 +55,6 @@ This guide covers three scenarios: > [!NOTE] > The examples in this guide use the VS Code `mcp.json` format. If you're using a different MCP client, see [Configuring other MCP clients](#configuring-other-mcp-clients) at the end of this guide. -todo: a test link not within a Note: [Configuring other MCP clients](#configuring-other-mcp-clients) - ## 1. Launching Edge From 1ab9822e960499de943eed188e42464eee8d7bcd Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Fri, 29 May 2026 09:14:34 -0700 Subject: [PATCH 06/13] new toc design --- microsoft-edge/toc.yml | 62 ++++++++++++++++++++++-------------------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index b583b4433d..396e472f31 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -105,31 +105,45 @@ href: ./web-platform/site-impacting-changes.md # /Release notes # ============================================================================= -# Experimental APIs for Microsoft Edge - - name: Experimental APIs for Microsoft Edge +# AI for the web + - name: AI for the web items: - - name: Test experimental APIs and features by using origin trials - href: ./origin-trials/index.md - displayName: Experimental web platform features # standard term eg in edge://flags + - name: Developer APIs + items: + - name: Test experimental APIs and features by using origin trials + href: ./origin-trials/index.md + displayName: Experimental web platform features # standard term eg in edge://flags + + - name: Provide user-relevant ads with the Ad Selection API + href: ./web-platform/ad-selection-api.md + + - name: Prompt a built-in language model with the Prompt API + href: ./web-platform/prompt-api.md + + - name: Summarize, write, and rewrite text with the Writing Assistance APIs + href: ./web-platform/writing-assistance-apis.md - - name: Provide user-relevant ads with the Ad Selection API - href: ./web-platform/ad-selection-api.md + - name: Correct grammar, spelling, and punctuation errors in text with the Proofreader API + href: ./web-platform/proofreader-api.md - - name: Prompt a built-in language model with the Prompt API - href: ./web-platform/prompt-api.md + - name: Translate text with the Translator API + href: ./web-platform/translator-api.md - - name: Summarize, write, and rewrite text with the Writing Assistance APIs - href: ./web-platform/writing-assistance-apis.md + - name: Detect languages with the Language Detector API + href: ./web-platform/languagedetector-api.md - - name: Correct grammar, spelling, and punctuation errors in text with the Proofreader API - href: ./web-platform/proofreader-api.md + - name: Convert speech to text with the SpeechRecognition API + href: ./web-platform/speech-recognition-api.md - - name: Translate text with the Translator API - href: ./web-platform/translator-api.md + - name: DevTools for agents + items: + - name: Index + href: ./devtools/agents/index.md + displayName: - - name: Detect languages with the Language Detector API - href: ./web-platform/languagedetector-api.md -# /Experimental APIs for Microsoft Edge + - name: Using Edge and WebView2 with Chrome DevTools MCP + href: ./devtools/agents/mcp.md +# /AI for the web # ============================================================================= # ----------------------------------------------------------------------------- - name: Microsoft Edge DevTools @@ -1075,18 +1089,6 @@ href: ./devtools/accessibility/narrow.md displayName: Device Emulation, Device Emulator # /Accessibility -# ----------------------------------------------------------------------------- -# DevTools for agents - - name: DevTools for agents - items: - - name: Index - href: ./devtools/agents/index.md - displayName: - - - name: Using Microsoft Edge and WebView2 with Chrome DevTools MCP - href: ./devtools/agents/mcp.md - displayName: -# /DevTools for agents # ----------------------------------------------------------------------------- - name: Use DevTools in Internet Explorer mode (IE mode) href: ./devtools/ie-mode/index.md From 26ae8cfe956c21a5959ecd9d0241dd8ca67e5c1e Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Fri, 29 May 2026 18:06:04 -0700 Subject: [PATCH 07/13] restore toc Exper APIs --- microsoft-edge/toc.yml | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 396e472f31..906ab826d5 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -105,18 +105,22 @@ href: ./web-platform/site-impacting-changes.md # /Release notes # ============================================================================= +# Experimental APIs for Microsoft Edge + - name: Experimental APIs for Microsoft Edge + items: + - name: Test experimental APIs and features by using origin trials + href: ./origin-trials/index.md + displayName: Experimental web platform features # standard term eg in edge://flags + + - name: Provide user-relevant ads with the Ad Selection API + href: ./web-platform/ad-selection-api.md +# /Experimental APIs for Microsoft Edge +# ============================================================================= # AI for the web - name: AI for the web items: - name: Developer APIs items: - - name: Test experimental APIs and features by using origin trials - href: ./origin-trials/index.md - displayName: Experimental web platform features # standard term eg in edge://flags - - - name: Provide user-relevant ads with the Ad Selection API - href: ./web-platform/ad-selection-api.md - - name: Prompt a built-in language model with the Prompt API href: ./web-platform/prompt-api.md From a9ddfc34ff2368da48180099c8d510e10781c6e1 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Fri, 29 May 2026 18:26:28 -0700 Subject: [PATCH 08/13] Update index.md --- microsoft-edge/devtools/agents/index.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/microsoft-edge/devtools/agents/index.md b/microsoft-edge/devtools/agents/index.md index e512e7f453..a9d6d31b69 100644 --- a/microsoft-edge/devtools/agents/index.md +++ b/microsoft-edge/devtools/agents/index.md @@ -1,11 +1,16 @@ --- -title: Index -description: Index. +title: DevTools for agents +description: Using Microsoft Edge DevTools for agents. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge ms.subservice: devtools -ms.date: 05/27/2026 +ms.date: 05/29/2026 --- -# Index +# DevTools for agents + +Microsoft Edge DevTools supports agents. + +See: +* [Using Microsoft Edge and WebView2 with Chrome DevTools MCP](./mcp.md) From 2884011d584bbba9643c1b69145d9d3fcb5199a6 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Thu, 4 Jun 2026 12:58:00 -0700 Subject: [PATCH 09/13] inc cmts --- microsoft-edge/devtools/agents/index.md | 16 ----- microsoft-edge/toc.yml | 14 ++-- .../devtools-mcp-server.md} | 72 ++++++++++--------- microsoft-edge/web-platform/index.md | 17 +++++ 4 files changed, 62 insertions(+), 57 deletions(-) delete mode 100644 microsoft-edge/devtools/agents/index.md rename microsoft-edge/{devtools/agents/mcp.md => web-platform/devtools-mcp-server.md} (81%) create mode 100644 microsoft-edge/web-platform/index.md diff --git a/microsoft-edge/devtools/agents/index.md b/microsoft-edge/devtools/agents/index.md deleted file mode 100644 index a9d6d31b69..0000000000 --- a/microsoft-edge/devtools/agents/index.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: DevTools for agents -description: Using Microsoft Edge DevTools for agents. -author: MSEdgeTeam -ms.author: msedgedevrel -ms.topic: article -ms.service: microsoft-edge -ms.subservice: devtools -ms.date: 05/29/2026 ---- -# DevTools for agents - -Microsoft Edge DevTools supports agents. - -See: -* [Using Microsoft Edge and WebView2 with Chrome DevTools MCP](./mcp.md) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 360979a93e..aa6ce55bf7 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -119,7 +119,10 @@ # AI for the web - name: AI for the web items: - - name: Developer APIs + - name: AI for the web + href: ./web-platform/index.md + + - name: AI web APIs for sites items: - name: Prompt a built-in language model with the Prompt API href: ./web-platform/prompt-api.md @@ -139,13 +142,10 @@ - name: Convert speech to text with the SpeechRecognition API href: ./web-platform/speech-recognition-api.md - - name: DevTools for agents + - name: Expose sites to agents items: - - name: DevTools for agents - href: ./devtools/agents/index.md - - - name: Using Edge and WebView2 with Chrome DevTools MCP - href: ./devtools/agents/mcp.md + - name: Let agents inspect your site and WebView2 app with Chrome DevTools MCP + href: ./web-platform/devtools-mcp-server.md # /AI for the web # ============================================================================= # ----------------------------------------------------------------------------- diff --git a/microsoft-edge/devtools/agents/mcp.md b/microsoft-edge/web-platform/devtools-mcp-server.md similarity index 81% rename from microsoft-edge/devtools/agents/mcp.md rename to microsoft-edge/web-platform/devtools-mcp-server.md index f1764f55ec..cb14b80b03 100644 --- a/microsoft-edge/devtools/agents/mcp.md +++ b/microsoft-edge/web-platform/devtools-mcp-server.md @@ -1,6 +1,6 @@ --- -title: Using Microsoft Edge and WebView2 with Chrome DevTools MCP -description: Using Microsoft Edge and WebView2 with Chrome DevTools MCP. +title: Let agents inspect your site and WebView2 app with Chrome DevTools MCP +description: Let agents inspect your site and WebView2 app with Chrome DevTools MCP. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: article @@ -8,27 +8,32 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 05/27/2026 --- -# Using Microsoft Edge and WebView2 with Chrome DevTools MCP +# Let agents inspect your site and WebView2 app with Chrome DevTools MCP -The [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) server supports connecting to any Chromium-based browser, including Microsoft Edge and WebView2. Because the server is built for Chrome, you need to provide extra configuration to point the server at Microsoft Edge or a WebView2 instance. +Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Copilot, Antigravity, Claude, or Cursor) control and inspect a live Chromium-based browser. Chrome DevTools for agents acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Microsoft Edge DevTools for reliable automation, in-depth debugging, and performance analysis. + +The Chrome DevTools MCP server supports connecting to any Chromium-based browser, including Microsoft Edge and WebView2. Because the server is built for Chrome, you need to provide extra configuration to point the server at Microsoft Edge or a WebView2 instance. + +See also: +* [Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/README.md) - the "ChromeDevTools / chrome-devtools-mcp" repo. This guide covers three scenarios: -1. [Launching Edge](#1-launching-edge) — the MCP server starts Edge for you. -1. [Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) — you start Edge yourself and the MCP server connects to it. -1. [Auto-connecting to WebView2](#3-auto-connecting-to-webview2) — the MCP server connects to a running WebView2 host app. +* [Launching Edge](#1-launching-edge) — the MCP server starts Edge for you. +* [Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) — you start Edge yourself and the MCP server connects to it. +* [Auto-connecting to WebView2](#3-auto-connecting-to-webview2) — the MCP server connects to a running WebView2 host app. **Detailed contents:** * [Prerequisites](#prerequisites) -* [1. Launching Edge](#1-launching-edge) -* [Additional flags](#additional-flags) -* [Edge executable paths for other channels](#edge-executable-paths-for-other-channels) -* [2. Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) +* [Launching Edge](#launching-edge) + * [Additional flags for launching Edge](#additional-flags-for-launching-edge) + * [Edge executable paths for other channels](#edge-executable-paths-for-other-channels) +* [Auto-connecting to a running Edge instance](auto-connecting-to-a-running-edge-instance) * [Step 1: Enable remote debugging in Edge](#step-1-enable-remote-debugging-in-edge) * [Step 2: Configure the MCP server](#step-2-configure-the-mcp-server) * [Step 3: Test your setup](#step-3-test-your-setup) * [Edge user data directories for other channels](#edge-user-data-directories-for-other-channels) -* [3. Auto-connecting to WebView2](#3-auto-connecting-to-webview2) +* [Auto-connecting to WebView2](auto-connecting-to-webview2) * [Step 1: Enable remote debugging for WebView2](#step-1-enable-remote-debugging-for-webview2) * [Step 2: Find the WebView2 user data directory](#step-2-find-the-webview2-user-data-directory) * [Step 3: Configure the MCP server](#step-3-configure-the-mcp-server) @@ -47,19 +52,20 @@ This guide covers three scenarios: ## Prerequisites -* [Node.js](https://nodejs.org) LTS version -* [npm](https://www.npmjs.com) -* Microsoft Edge installed (any channel: Stable, Beta, Dev, or Canary) -* An MCP client such as VS Code (with GitHub Copilot), Copilot CLI, Claude Code, Cursor, etc. +* [Node.js](https://nodejs.org), the latest Long-Term Support (LTS) release. +* [npm](https://www.npmjs.com). +* Microsoft Edge installed (any channel: Stable, Beta, Dev, or Canary). +* A coding agent with MCP support such as VS Code (with GitHub Copilot), Copilot CLI, Claude Code, or Cursor. -> [!NOTE] -> The examples in this guide use the VS Code `mcp.json` format. If you're using a different MCP client, see [Configuring other MCP clients](#configuring-other-mcp-clients) at the end of this guide. +The examples in this guide use the VS Code `mcp.json` format. If you're using a different MCP client, see [Configuring other MCP clients](#configuring-other-mcp-clients) at the end of this guide. -## 1. Launching Edge +## Launching Edge -In this mode, the MCP server launches Edge directly using the `--executablePath` flag pointed at your Edge binary. +Use this configuration to let your coding agent launch Edge directly for you. + +With this configuration, the MCP server, which your agent connects to, launches Edge directly by using the `--executablePath` flag pointing to where the Edge binary is located. Copy and paste the configuration snippet for your platform into your VS Code `mcp.json`. These examples use Edge Stable. @@ -120,8 +126,8 @@ Copy and paste the configuration snippet for your platform into your VS Code `mc --- - -## Additional flags + +#### Additional flags for launching Edge You can combine `--executablePath` with other flags: @@ -142,11 +148,13 @@ Example with headless and isolated (Windows): ``` - -## Edge executable paths for other channels + +#### Edge executable paths for other channels If you're not using Edge Stable, replace the `--executablePath` value with the appropriate path for your channel. +These are default install locations. Paths may vary based on user configuration, version, or group policies. Linux doesn't have a Canary channel. + ##### [Windows](#tab/windows/) | Channel | Default Path | @@ -154,7 +162,7 @@ If you're not using Edge Stable, replace the `--executablePath` value with the a | Stable | `%ProgramFiles(x86)%\Microsoft\Edge\Application\msedge.exe` | | Beta | `%ProgramFiles(x86)%\Microsoft\Edge Beta\Application\msedge.exe` | | Dev | `%ProgramFiles(x86)%\Microsoft\Edge Dev\Application\msedge.exe` | -| Canary | `%LOCALAPPDATA%\Microsoft\Edge SxS\Application\msedge.exe` | +| Canary | `%LOCALAPPDATA%\Microsoft\Edge SxS\Application\msedge.exe` | ##### [macOS](#tab/macos/) @@ -175,14 +183,11 @@ If you're not using Edge Stable, replace the `--executablePath` value with the a --- -> [!NOTE] -> These are default install locations. Paths may vary based on user configuration, version, or group policies. Linux does not have a Canary channel. - -## 2. Auto-connecting to a running Edge instance +## Auto-connecting to a running Edge instance -In this mode, you start Edge yourself (or it's already running), and the MCP server connects to it. This is useful when: +Use the configuration below to connect to an already running Edge instance. This is useful when: * You want to maintain browser state between manual testing and agent-driven testing. * You need to be signed into a website that blocks automated browser launches. @@ -284,6 +289,8 @@ The MCP server should connect to your running Edge instance and execute the comm If you're not using Edge Stable, replace the `--user-data-dir` value with the appropriate path for your channel. +These are default locations. Paths may vary based on user configuration, version, or group policies. Linux doesn't have a Canary channel. + ##### [Windows](#tab/windows/) | Channel | Default Path | @@ -312,12 +319,9 @@ If you're not using Edge Stable, replace the `--user-data-dir` value with the ap --- -> [!NOTE] -> These are default locations. Paths may vary based on user configuration, version, or group policies. Linux does not have a Canary channel. - -## 3. Auto-connecting to WebView2 +## Auto-connecting to WebView2 WebView2 doesn't have a "launch" scenario — the host application creates the WebView2 instance. The MCP server connects to it via auto-connect, similar to the Edge scenario above. diff --git a/microsoft-edge/web-platform/index.md b/microsoft-edge/web-platform/index.md new file mode 100644 index 0000000000..691b655b30 --- /dev/null +++ b/microsoft-edge/web-platform/index.md @@ -0,0 +1,17 @@ +--- +title: AI for the web +description: AI for the web. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 05/29/2026 +--- +# AI for the web + +Microsoft Edge supports the following: + +_AI web APIs for sites_ are web APIs which you (a web app developer) can use from the JavaScript code in your website, to run AI models. + +_Expose sites to agents_ are tools that you can use to give AI agents access to your website, such as to debug the website. From 0e39f2c331c0294793c9718112335c800c120507 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Thu, 4 Jun 2026 16:16:49 -0700 Subject: [PATCH 10/13] Writer/Editor pass --- .../web-platform/devtools-mcp-server.md | 170 ++++++++++-------- 1 file changed, 100 insertions(+), 70 deletions(-) diff --git a/microsoft-edge/web-platform/devtools-mcp-server.md b/microsoft-edge/web-platform/devtools-mcp-server.md index cb14b80b03..d9a714707e 100644 --- a/microsoft-edge/web-platform/devtools-mcp-server.md +++ b/microsoft-edge/web-platform/devtools-mcp-server.md @@ -1,52 +1,65 @@ --- title: Let agents inspect your site and WebView2 app with Chrome DevTools MCP -description: Let agents inspect your site and WebView2 app with Chrome DevTools MCP. +description: Let agents inspect your site and WebView2 app with Chrome DevTools Model-Context-Protocol (MCP). author: MSEdgeTeam ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge ms.subservice: devtools -ms.date: 05/27/2026 +ms.date: 06/04/2026 --- # Let agents inspect your site and WebView2 app with Chrome DevTools MCP -Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Copilot, Antigravity, Claude, or Cursor) control and inspect a live Chromium-based browser. Chrome DevTools for agents acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Microsoft Edge DevTools for reliable automation, in-depth debugging, and performance analysis. - -The Chrome DevTools MCP server supports connecting to any Chromium-based browser, including Microsoft Edge and WebView2. Because the server is built for Chrome, you need to provide extra configuration to point the server at Microsoft Edge or a WebView2 instance. - -See also: -* [Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/README.md) - the "ChromeDevTools / chrome-devtools-mcp" repo. - -This guide covers three scenarios: - -* [Launching Edge](#1-launching-edge) — the MCP server starts Edge for you. -* [Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) — you start Edge yourself and the MCP server connects to it. -* [Auto-connecting to WebView2](#3-auto-connecting-to-webview2) — the MCP server connects to a running WebView2 host app. +Chrome DevTools for agents (`chrome-devtools-mcp`) lets your coding agent (such as Copilot, Antigravity, Claude, or Cursor) control and inspect a live Chromium-based browser, including Microsoft Edge and WebView2. **Detailed contents:** +* [Introduction](#introduction) * [Prerequisites](#prerequisites) -* [Launching Edge](#launching-edge) +* [Launch Edge](#launch-edge) * [Additional flags for launching Edge](#additional-flags-for-launching-edge) - * [Edge executable paths for other channels](#edge-executable-paths-for-other-channels) -* [Auto-connecting to a running Edge instance](auto-connecting-to-a-running-edge-instance) + * [Executable path for each Edge channel](#executable-path-for-each-edge-channel) +* [Auto-connect to a running Edge instance](auto-connect-to-a-running-edge-instance) * [Step 1: Enable remote debugging in Edge](#step-1-enable-remote-debugging-in-edge) * [Step 2: Configure the MCP server](#step-2-configure-the-mcp-server) * [Step 3: Test your setup](#step-3-test-your-setup) - * [Edge user data directories for other channels](#edge-user-data-directories-for-other-channels) -* [Auto-connecting to WebView2](auto-connecting-to-webview2) + * [User data directory for each Edge channel](#user-data-directory-for-each-edge-channel) +* [Auto-connect to a WebView2 instance](#auto-connect-to-a-webview2-instance) * [Step 1: Enable remote debugging for WebView2](#step-1-enable-remote-debugging-for-webview2) + * [By using WebView2Utilities](#by-using-webview2utilities) + * [By using the Windows Registry](#by-using-the-windows-registry) * [Step 2: Find the WebView2 user data directory](#step-2-find-the-webview2-user-data-directory) * [Step 3: Configure the MCP server](#step-3-configure-the-mcp-server) * [Step 4: Test your setup](#step-4-test-your-setup) * [How it works](#how-it-works) * [Configuring other MCP clients](#configuring-other-mcp-clients) * [Copilot CLI](#copilot-cli) - * [Other MCP clients (Claude Code, Cursor, Gemini CLI, etc.)](#other-mcp-clients-claude-code-cursor-gemini-cli-etc) + * [Other MCP clients, such as Claude Code, Cursor, or Gemini CLI](#other-mcp-clients-such-as-claude-code-cursor-or-gemini-cli) * [Troubleshooting](#troubleshooting) * ["Could not connect to Chrome" error with auto-connect](#could-not-connect-to-chrome-error-with-auto-connect) * [Edge not found at executablePath](#edge-not-found-at-executablepath) * [WebView2 won't connect](#webview2-wont-connect) -* [Further reading](#further-reading) +* [See also](#see-also) + + + +## Introduction + + +Chrome DevTools for agents (`chrome-devtools-mcp`) lets your coding agent (such as Copilot, Antigravity, Claude, or Cursor) control and inspect a live Chromium-based browser, including Microsoft Edge and WebView2. + + +Chrome DevTools for agents acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Microsoft Edge DevTools for reliable automation, in-depth debugging, and performance analysis. + +The Chrome DevTools MCP server supports connecting to any Chromium-based browser, including Microsoft Edge and WebView2. Because the server is built for the Google Chrome browser, you need to provide extra configuration to point the server at Microsoft Edge or a WebView2 instance. + +This guide covers three scenarios: + +* [Launching Edge](#1-launching-edge) — the MCP server starts Edge for you. +* [Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) — you start Edge yourself and the MCP server connects to it. +* [Auto-connecting to WebView2](#3-auto-connecting-to-webview2) — the MCP server connects to a running WebView2 host app. + +See also: +* [Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/README.md) - the "ChromeDevTools / chrome-devtools-mcp" repo. @@ -55,17 +68,17 @@ This guide covers three scenarios: * [Node.js](https://nodejs.org), the latest Long-Term Support (LTS) release. * [npm](https://www.npmjs.com). * Microsoft Edge installed (any channel: Stable, Beta, Dev, or Canary). -* A coding agent with MCP support such as VS Code (with GitHub Copilot), Copilot CLI, Claude Code, or Cursor. +* A coding agent with Model-Context-Protocol (MCP) support, such as Microsoft Visual Studio Code (with GitHub Copilot), Copilot CLI, Claude Code, or Cursor. -The examples in this guide use the VS Code `mcp.json` format. If you're using a different MCP client, see [Configuring other MCP clients](#configuring-other-mcp-clients) at the end of this guide. +The examples in this guide use the VS Code `mcp.json` format. If you're using a different MCP client, see [Configuring other MCP clients](#configuring-other-mcp-clients), below. -## Launching Edge +## Launch Edge -Use this configuration to let your coding agent launch Edge directly for you. +Use this configuration to let your coding agent launch Microsoft Edge for you. -With this configuration, the MCP server, which your agent connects to, launches Edge directly by using the `--executablePath` flag pointing to where the Edge binary is located. +With this configuration, the Model-Context-Protocol (MCP) server, which your agent connects to, launches Edge, by using the `--executablePath` flag pointing to the Edge binary. Copy and paste the configuration snippet for your platform into your VS Code `mcp.json`. These examples use Edge Stable. @@ -129,7 +142,7 @@ Copy and paste the configuration snippet for your platform into your VS Code `mc #### Additional flags for launching Edge -You can combine `--executablePath` with other flags: +You can combine `--executablePath` with the following flags: * `--headless` — run without a visible browser window * `--isolated` — use a temporary profile directory (cleaned up on close) @@ -149,11 +162,11 @@ Example with headless and isolated (Windows): -#### Edge executable paths for other channels +#### Executable path for each Edge channel -If you're not using Edge Stable, replace the `--executablePath` value with the appropriate path for your channel. +Use the appropriate `--executablePath` value for your channel of Edge. -These are default install locations. Paths may vary based on user configuration, version, or group policies. Linux doesn't have a Canary channel. +These are default install locations. Paths may vary based on user configuration, version, or group policies. ##### [Windows](#tab/windows/) @@ -180,12 +193,13 @@ These are default install locations. Paths may vary based on user configuration | Stable | `/usr/bin/microsoft-edge` | | Beta | `/usr/bin/microsoft-edge-beta` | | Dev | `/usr/bin/microsoft-edge-dev` | +| Canary | n/a; there isn't a Canary channel for Linux. | --- -## Auto-connecting to a running Edge instance +## Auto-connect to a running Edge instance Use the configuration below to connect to an already running Edge instance. This is useful when: @@ -200,7 +214,7 @@ Use the configuration below to connect to an already running Edge instance. Thi #### Step 1: Enable remote debugging in Edge -You have two options: +There are have two options: **Option A:** Start Edge with the remote debugging flag: @@ -212,7 +226,7 @@ You have two options: #### Step 2: Configure the MCP server -Use `--autoConnect` combined with `--user-data-dir` pointing to your Edge user data directory. These examples use Edge Stable. +To configure the Model-Context-Protocol (MCP) server, use `--autoConnect` combined with `--user-data-dir` pointing to your Microsoft Edge user data directory. These examples use the Edge Stable channel. ##### [Windows](#tab/windows/) @@ -277,19 +291,19 @@ Use `--autoConnect` combined with `--user-data-dir` pointing to your Edge user d #### Step 3: Test your setup -Make sure Edge is running, then enter the following prompt in your MCP client: +Make sure Microsoft Edge is running, then enter the following prompt in your Model-Context-Protocol (MCP) client: -`Navigate to https://example.com and take a screenshot` +`Navigate to https://contoso.com and take a screenshot` The MCP server should connect to your running Edge instance and execute the command. -#### Edge user data directories for other channels +#### User data directory for each Edge channel -If you're not using Edge Stable, replace the `--user-data-dir` value with the appropriate path for your channel. +Use the appropriate `--user-data-dir` value for your channel. -These are default locations. Paths may vary based on user configuration, version, or group policies. Linux doesn't have a Canary channel. +These are default locations. Paths may vary based on user configuration, version, or group policies. ##### [Windows](#tab/windows/) @@ -316,28 +330,36 @@ These are default locations. Paths may vary based on user configuration, versio | Stable | `~/.config/microsoft-edge` | | Beta | `~/.config/microsoft-edge-beta` | | Dev | `~/.config/microsoft-edge-dev` | +| Canary | n/a; there isn't a Canary channel for Linux. | + --- -## Auto-connecting to WebView2 +## Auto-connect to a WebView2 instance + +WebView2 doesn't have a "launch" scenario; instead, the host app creates the WebView2 instance. -WebView2 doesn't have a "launch" scenario — the host application creates the WebView2 instance. The MCP server connects to it via auto-connect, similar to the Edge scenario above. +The MCP server connects to the WebView2 instance via auto-connect, similar to [Auto-connecting to a running Edge instance](#auto-connecting-to-a-running-edge-instance), above. #### Step 1: Enable remote debugging for WebView2 -You need to configure the WebView2 runtime to start with `--remote-debugging-port=0`. There are two ways to do this: +You need to configure the WebView2 runtime to start with `--remote-debugging-port=0`. There are two ways to do this: WebView2Utilities, or Windows Registry. + + + +###### By using WebView2Utilities -**Option A: Using WebView2Utilities** +In this approach, you use WebView2Utilities and follow the steps in [How to: Auto open DevTools](https://github.com/david-risney/WebView2Utilities/wiki/How-to:-Auto-open-DevTools). But instead of selecting the **Auto open DevTools** checkbox, in the **Arguments** textbox, enter `--remote-debugging-port=0`. -Use WebView2Utilities and follow the How to: Auto open DevTools guide. Instead of checking the "Auto open DevTools" checkbox, type `--remote-debugging-port=0` in the Arguments textbox. -**Option B: Via the Windows Registry** + +###### By using the Windows Registry -Create a registry value to set `AdditionalBrowserArguments`. Replace `appname.exe` with the name of your WebView2 host executable: +In this approach, you create a registry value to set `AdditionalBrowserArguments`. Replace `appname.exe` with the name of your WebView2 host executable: ``` [HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments] @@ -348,12 +370,11 @@ Create a registry value to set `AdditionalBrowserArguments`. Replace `appname.e #### Step 2: Find the WebView2 user data directory -You need to discover the user data directory of the host app. The path should end with `EBWebView` — this suffix is automatically added by the WebView2 runtime. +You need to discover the user data directory of the host app. -You can find this path using WebView2Utilities: go to the **Host Apps** tab, select your running host app, and look at the **User data folder** row. +The path for the user data directory ends with `\EBWebView`. The `\EBWebView` suffix is automatically added by the WebView2 Runtime. If you're copying the user data path from source code, you might need to append `\EBWebView`. -> [!NOTE] -> If you're copying the user data path from source code, you may need to append `\EBWebView` yourself since the runtime adds this automatically at runtime. +You can find the path for the user data directory by using WebView2Utilities: In the **Host Apps** tab, select your running host app, and examine the **User data folder** row. @@ -382,23 +403,25 @@ Replace `` with the package name of your host app. #### Step 4: Test your setup -Launch your WebView2 host app, then use your MCP client to interact with it: +Launch your WebView2 host app, then use your MCP client to interact with your WebView2 host app: -`Take a snapshot of the current page` +`Take a snapshot of the current page` ## How it works -Under the hood, the Chrome DevTools MCP server uses [Puppeteer](https://github.com/puppeteer/puppeteer) to control the browser. When you provide `--executablePath`, Puppeteer launches that binary directly instead of searching for Chrome. When you provide `--autoConnect` with `--user-data-dir`, the server reads the `DevToolsActivePort` file from that directory to discover the WebSocket endpoint of the running browser and connects to it. +Under the hood, the Chrome DevTools MCP server uses [Puppeteer](https://github.com/puppeteer/puppeteer) to control the browser. When you provide `--executablePath`, Puppeteer launches that binary directly, instead of searching for the browser. -Since Edge and WebView2 are Chromium-based, the DevTools Protocol is compatible and the MCP tools work as expected. +When you provide `--autoConnect` with `--user-data-dir`, the server reads the `DevToolsActivePort` file from that directory to discover the WebSocket endpoint of the running browser and connects to it. + +Because Microsoft Edge and WebView2 are based on the Chromium browser engine, the DevTools Protocol is compatible with Microsoft Edge and WebView2, and the MCP tools work as expected. ## Configuring other MCP clients -The examples above use the VS Code `mcp.json` format. Here's how to adapt them for other clients: +The examples above use the Visual Studio Code `mcp.json` format. Here's how to adapt the above examples for other Model-Context-Protocol (MCP) clients: @@ -426,9 +449,9 @@ You can also add an MCP server interactively by running `copilot` and then `/mcp -#### Other MCP clients (Claude Code, Cursor, Gemini CLI, etc.) +#### Other MCP clients, such as Claude Code, Cursor, or Gemini CLI -Most MCP clients use the generic mcpServers format without a `type` field: +Most Model-Context-Protocol (MCP) clients use the generic `mcpServers` format without a `type` field: ```json { @@ -445,7 +468,7 @@ Most MCP clients use the generic mcpServers format without a `type` field: } ``` -The `args` array is the same across all clients — only the wrapper format differs. Refer to your MCP client's documentation for the exact config file location and format. +The `args` array is the same across all clients; only the wrapper format differs. See your MCP client's documentation for the exact config file location and format. @@ -455,30 +478,37 @@ The `args` array is the same across all clients — only the wrapper format diff #### "Could not connect to Chrome" error with auto-connect -* Ensure Edge is running and remote debugging is enabled. -* Verify the `--user-data-dir` path is correct for your Edge channel. -* Check that DevToolsActivePort exists in the user data directory (it's created when remote debugging is active). +If you are using auto-connect and get an error such as "Could not connect to Chrome": + +* Make sure Microsoft Edge is running, and remote debugging is enabled. +* Make sure the `--user-data-dir` path is correct for your channel of Microsoft Edge. +* Make sure the `DevToolsActivePort` file exists in the user data directory. The `DevToolsActivePort` file is created when remote debugging is active. -#### Edge not found at executablePath +#### Edge not found at `executablePath` -* Verify the path exists on disk. Edge Canary on Windows installs per-user under `%LOCALAPPDATA%`, not in `Program Files`. +* Make sure that the `executablePath` for the channel of Microsoft Edge exists on disk. For example, Edge Canary on Windows installs per-user under `%LOCALAPPDATA%`, not under `\Program Files\`. * On Windows, use double backslashes (`\\`) in JSON strings. #### WebView2 won't connect -* Confirm the registry key matches your host app's executable name exactly. -* Restart the host app after adding the registry key — the argument is only read at WebView2 creation time. -* Ensure the `--user-data-dir` path ends with `EBWebView`. +* Make sure the registry key matches your host app's executable name exactly. +* Restart the host app after adding the registry key. The argument is only read at WebView2 creation time. +* Make sure the `--user-data-dir` path ends with `\EBWebView`. -## Further reading +## See also + +* [Remotely debug Android devices](../devtools/remote-debugging/index.md) + +GitHub: +* [Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp) - the README of the "ChromeDevTools / chrome-devtools-mcp" repo. +* [WebView2Utilities](https://github.com/david-risney/WebView2Utilities) — tool for managing WebView2 debugging; the "david-risney / WebView2Utilities" repo. + * [How to: Auto open DevTools](https://github.com/david-risney/WebView2Utilities/wiki/How-to:-Auto-open-DevTools) -* [Chrome DevTools MCP README](https://github.com/ChromeDevTools/chrome-devtools-mcp) -* [Edge and WebView2 in Chrome DevTools MCP](https://deletethis.net/dave/2026-03/edge-and-webview2-in-chrome-devtools-mcp/) — original blog post by David Risney -* [WebView2Utilities](https://github.com/david-risney/WebView2Utilities) — tool for managing WebView2 debugging -* [Chrome DevTools remote debugging documentation](https://developer.chrome.com/docs/devtools/remote-debugging/) +Blogs: +* [Edge and WebView2 in Chrome DevTools MCP](https://deletethis.net/dave/2026-03/edge-and-webview2-in-chrome-devtools-mcp/) From ec914bdee689755b435dd85059644388197e3f4d Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Thu, 4 Jun 2026 16:37:49 -0700 Subject: [PATCH 11/13] linkfix --- microsoft-edge/web-platform/devtools-mcp-server.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/microsoft-edge/web-platform/devtools-mcp-server.md b/microsoft-edge/web-platform/devtools-mcp-server.md index d9a714707e..b050e8bd78 100644 --- a/microsoft-edge/web-platform/devtools-mcp-server.md +++ b/microsoft-edge/web-platform/devtools-mcp-server.md @@ -18,7 +18,7 @@ Chrome DevTools for agents (`chrome-devtools-mcp`) lets your coding agent (such * [Launch Edge](#launch-edge) * [Additional flags for launching Edge](#additional-flags-for-launching-edge) * [Executable path for each Edge channel](#executable-path-for-each-edge-channel) -* [Auto-connect to a running Edge instance](auto-connect-to-a-running-edge-instance) +* [Auto-connect to a running Edge instance](#auto-connect-to-a-running-edge-instance) * [Step 1: Enable remote debugging in Edge](#step-1-enable-remote-debugging-in-edge) * [Step 2: Configure the MCP server](#step-2-configure-the-mcp-server) * [Step 3: Test your setup](#step-3-test-your-setup) @@ -54,9 +54,9 @@ The Chrome DevTools MCP server supports connecting to any Chromium-based browser This guide covers three scenarios: -* [Launching Edge](#1-launching-edge) — the MCP server starts Edge for you. -* [Auto-connecting to a running Edge instance](#2-auto-connecting-to-a-running-edge-instance) — you start Edge yourself and the MCP server connects to it. -* [Auto-connecting to WebView2](#3-auto-connecting-to-webview2) — the MCP server connects to a running WebView2 host app. +* [Launch Edge](#launch-edge) — the MCP server starts Microsoft Edge for you. +* [Auto-connect to a running Edge instance](#auto-connect-to-a-running-edge-instance) — you start Edge yourself and the MCP server connects to it. +* [Auto-connect to a WebView2 instance](#auto-connect-to-a-webview2-instance) — the MCP server connects to a running WebView2 host app. See also: * [Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/README.md) - the "ChromeDevTools / chrome-devtools-mcp" repo. @@ -341,7 +341,7 @@ These are default locations. Paths may vary based on user configuration, versio WebView2 doesn't have a "launch" scenario; instead, the host app creates the WebView2 instance. -The MCP server connects to the WebView2 instance via auto-connect, similar to [Auto-connecting to a running Edge instance](#auto-connecting-to-a-running-edge-instance), above. +The MCP server connects to the WebView2 instance via auto-connect, similar to [Auto-connect to a running Edge instance](#auto-connect-to-a-running-edge-instance), above. From 3457b4737c9641c5b9d329e53c4a8ba206265406 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Thu, 4 Jun 2026 16:49:49 -0700 Subject: [PATCH 12/13] ` --- microsoft-edge/web-platform/devtools-mcp-server.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/microsoft-edge/web-platform/devtools-mcp-server.md b/microsoft-edge/web-platform/devtools-mcp-server.md index b050e8bd78..ce163b14b5 100644 --- a/microsoft-edge/web-platform/devtools-mcp-server.md +++ b/microsoft-edge/web-platform/devtools-mcp-server.md @@ -36,7 +36,7 @@ Chrome DevTools for agents (`chrome-devtools-mcp`) lets your coding agent (such * [Other MCP clients, such as Claude Code, Cursor, or Gemini CLI](#other-mcp-clients-such-as-claude-code-cursor-or-gemini-cli) * [Troubleshooting](#troubleshooting) * ["Could not connect to Chrome" error with auto-connect](#could-not-connect-to-chrome-error-with-auto-connect) - * [Edge not found at executablePath](#edge-not-found-at-executablepath) + * [Edge not found at `executablePath`](#edge-not-found-at-executablepath) * [WebView2 won't connect](#webview2-wont-connect) * [See also](#see-also) @@ -476,12 +476,14 @@ The `args` array is the same across all clients; only the wrapper format differs -#### "Could not connect to Chrome" error with auto-connect +#### "Could not connect to Chrome" error with auto-connect -If you are using auto-connect and get an error such as "Could not connect to Chrome": +If you are using auto-connect and get an error such as "Could not connect to Chrome": * Make sure Microsoft Edge is running, and remote debugging is enabled. + * Make sure the `--user-data-dir` path is correct for your channel of Microsoft Edge. + * Make sure the `DevToolsActivePort` file exists in the user data directory. The `DevToolsActivePort` file is created when remote debugging is active. @@ -489,6 +491,7 @@ If you are using auto-connect and get an error such as "Could not connect to Chr #### Edge not found at `executablePath` * Make sure that the `executablePath` for the channel of Microsoft Edge exists on disk. For example, Edge Canary on Windows installs per-user under `%LOCALAPPDATA%`, not under `\Program Files\`. + * On Windows, use double backslashes (`\\`) in JSON strings. @@ -496,7 +499,9 @@ If you are using auto-connect and get an error such as "Could not connect to Chr #### WebView2 won't connect * Make sure the registry key matches your host app's executable name exactly. -* Restart the host app after adding the registry key. The argument is only read at WebView2 creation time. + +* After adding the `AdditionalBrowserArguments` registry key, restart the host app. The app name `.exe` argument is only read at WebView2 creation time. + * Make sure the `--user-data-dir` path ends with `\EBWebView`. From 88a90e95093e9ce67685bfd3ece5365578201125 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Fri, 5 Jun 2026 00:25:10 -0700 Subject: [PATCH 13/13] Step 3 lead-in --- microsoft-edge/web-platform/devtools-mcp-server.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/microsoft-edge/web-platform/devtools-mcp-server.md b/microsoft-edge/web-platform/devtools-mcp-server.md index ce163b14b5..f33c7d7790 100644 --- a/microsoft-edge/web-platform/devtools-mcp-server.md +++ b/microsoft-edge/web-platform/devtools-mcp-server.md @@ -374,12 +374,14 @@ You need to discover the user data directory of the host app. The path for the user data directory ends with `\EBWebView`. The `\EBWebView` suffix is automatically added by the WebView2 Runtime. If you're copying the user data path from source code, you might need to append `\EBWebView`. -You can find the path for the user data directory by using WebView2Utilities: In the **Host Apps** tab, select your running host app, and examine the **User data folder** row. +You can find the path for the user data directory by using WebView2Utilities: in the **Host Apps** tab, select your running host app, and examine the **User data folder** row. #### Step 3: Configure the MCP server +To configure the Model-Context-Protocol (MCP) server, use `--autoConnect` combined with `--user-data-dir` pointing to the WebView2 user data directory: + ```json { "servers": { @@ -403,9 +405,9 @@ Replace `` with the package name of your host app. #### Step 4: Test your setup -Launch your WebView2 host app, then use your MCP client to interact with your WebView2 host app: +Launch your WebView2 host app, then use your MCP client to interact with your WebView2 host app. -`Take a snapshot of the current page` +For example, prompt your AI coding agent: `Take a snapshot of the current page`