ScreenshotNeo

BlogAI agents

How to Use Chrome DevTools MCP with Microsoft Edge

Connect Chrome DevTools MCP to Edge or WebView2 with launch, auto-connect, configuration examples, troubleshooting, and screenshots.

By the ScreenshotNeo team1 October 20268 min read

Yes. Chrome DevTools MCP works with Microsoft Edge and WebView2. You can let the MCP server launch Edge, connect it to an existing Edge session, or attach to a running WebView2 host. Edge uses Chromium and its DevTools Protocol APIs match Chrome DevTools Protocol APIs, so the MCP tools can inspect pages, take screenshots, debug issues, and analyze performance.

The quickest setup is to install the latest Node.js LTS, keep Edge installed, and add chrome-devtools-mcp@latest to your MCP client. Choose the launch method that matches your use case:

Method Use it when What you configure
Launch Edge You want a fresh browser controlled by the agent --executablePath
Auto-connect to Edge You need an existing tab, cookies, or signed-in session Remote debugging, --autoConnect, and --user-data-dir
Auto-connect to WebView2 The page runs inside a Windows WebView2 host application WebView2 remote debugging and its user-data directory

Microsoft’s setup guide documents these three paths in detail: Chrome DevTools MCP with Edge and WebView2. The protocol compatibility is described in the Microsoft Edge DevTools Protocol reference.

1. Prerequisites

  • Node.js, preferably the latest LTS release.
  • npm, installed with Node.js.
  • Microsoft Edge Stable, Beta, Dev, or Canary.
  • An MCP-capable coding agent, such as Visual Studio Code with GitHub Copilot, Copilot CLI, Claude Code, Cursor, or another compatible client.

The examples below use Visual Studio Code’s mcp.json format. Other clients generally use the same command and args values but wrap them differently.

2. Launch Edge from the MCP server

This is the simplest option when you do not need an existing browser profile. The MCP server starts Edge itself using the executable path you provide.

Windows

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

macOS

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge"
      ]
    }
  }
}

Linux

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=/usr/bin/microsoft-edge"
      ]
    }
  }
}

These are default locations. Installation policy, version, and Edge channel can change the path.

Edge executable paths by channel

Platform Stable Beta Dev Canary
Windows %ProgramFiles(x86)%\Microsoft\Edge\Application\msedge.exe %ProgramFiles(x86)%\Microsoft\Edge Beta\Application\msedge.exe %ProgramFiles(x86)%\Microsoft\Edge Dev\Application\msedge.exe %LOCALAPPDATA%\Microsoft\Edge SxS\Application\msedge.exe
macOS /Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge /Applications/Microsoft Edge Beta.app/Contents/MacOS/Microsoft Edge /Applications/Microsoft Edge Dev.app/Contents/MacOS/Microsoft Edge /Applications/Microsoft Edge Canary.app/Contents/MacOS/Microsoft Edge
Linux /usr/bin/microsoft-edge /usr/bin/microsoft-edge-beta /usr/bin/microsoft-edge-dev Not available

Useful launch flags

Add these arguments alongside --executablePath when needed:

  • --headless: run Edge without a visible window.
  • --isolated: use a temporary profile directory that is cleaned up when the browser closes.
  • --viewport=1280x720: set the initial viewport size.
{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=%ProgramFiles(x86)%\\Microsoft\\Edge\\Application\\msedge.exe",
        "--headless",
        "--isolated",
        "--viewport=1280x720"
      ]
    }
  }
}

3. Connect to a running Edge session

Use auto-connect when the agent must work with an existing browser state, such as a logged-in account, an open tab, or a manually prepared test session.

Security note: Auto-connect gives the agent access to the active session, including cookies, signed-in accounts, and information exposed through JavaScript APIs. Use it only with an agent you trust and review prompts carefully.

Step 1: Enable remote debugging

You can start Edge with the remote debugging flag:

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

Alternatively, enable it from Edge:

  1. Open edge://inspect.
  2. Select Remote debugging.
  3. Enable Allow remote debugging for this browser instance.

Step 2: Configure auto-connect

Windows, Edge Stable

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

macOS, Edge Stable

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--user-data-dir=~/Library/Application Support/Microsoft Edge"
      ]
    }
  }
}

Linux, Edge Stable

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--user-data-dir=~/.config/microsoft-edge"
      ]
    }
  }
}

Edge user-data directories by channel

Platform Stable Beta Dev Canary
Windows %LOCALAPPDATA%\Microsoft\Edge\User Data %LOCALAPPDATA%\Microsoft\Edge Beta\User Data %LOCALAPPDATA%\Microsoft\Edge Dev\User Data %LOCALAPPDATA%\Microsoft\Edge SxS\User Data
macOS ~/Library/Application Support/Microsoft Edge ~/Library/Application Support/Microsoft Edge Beta ~/Library/Application Support/Microsoft Edge Dev ~/Library/Application Support/Microsoft Edge Canary
Linux ~/.config/microsoft-edge ~/.config/microsoft-edge-beta ~/.config/microsoft-edge-dev Not available

Step 3: Verify the connection

Make sure Edge is running, then ask your MCP client:

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

If the server connects, it should control the running Edge instance and execute the request.

4. Connect to a WebView2 application

WebView2 does not have a server-launched mode because the host application creates the WebView2 instance. Configure remote debugging for the host, locate its WebView2 profile, and use auto-connect.

Step 1: Enable WebView2 remote debugging

The WebView2 runtime must start with --remote-debugging-port=0. Microsoft documents two approaches.

Using WebView2Utilities

  1. Install and run WebView2Utilities.
  2. Open the Overrides tab and select Add New.
  3. Set Host app exe to the host executable, such as OUTLOOK.EXE.
  4. Enter --remote-debugging-port=0 in the browser arguments.
  5. Close the host app if it is running, then restart it.

Using the Windows Registry

Create this value and replace appname.exe with the exact host executable name:

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

The host application must be restarted after changing the registry because the argument is read when WebView2 is created.

Step 2: Find the WebView2 profile

The WebView2 user-data directory normally ends with \EBWebView. WebView2Utilities shows the path in the host app’s User data folder row. If you obtain the path from application source code, append \EBWebView when required.

Step 3: Configure the MCP server

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

Replace <APP_PACKAGE> with the package name of the host application.

Step 4: Verify WebView2

Launch the host application, then ask the agent:

Take a snapshot of the current page

5. Configure clients other than Visual Studio Code

The server arguments stay the same; the wrapper differs by client.

Copilot CLI

Copilot CLI uses ~/.copilot/mcp-config.json, mcpServers, and type: local:

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

Copilot CLI also supports adding an MCP server interactively with /mcp add.

Claude Code, Cursor, Gemini CLI, and similar clients

Many clients use mcpServers without a type field:

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

Check your client’s documentation for the exact configuration filename and location.

6. How the connection works

The MCP server uses Puppeteer to control the browser. With --executablePath, Puppeteer launches the specified Edge binary directly. With --autoConnect and --user-data-dir, the server reads the DevToolsActivePort file in that profile to discover the browser’s WebSocket endpoint.

Edge and WebView2 are Chromium-based, so the Chrome DevTools Protocol connection is compatible. The low-level debugging endpoint can also expose targets through http://localhost:9222/json/list, where each target includes a webSocketDebuggerUrl.

7. Choosing the right connection method

Requirement Recommended setup Reason
Clean, repeatable browser state Launch Edge with --isolated A temporary profile avoids unrelated cookies and tabs.
Headless automation Launch Edge with --headless No visible browser window is required.
Existing login or manual state Auto-connect to Edge The agent can use the running session.
Debug an embedded Windows app Auto-connect to WebView2 The host app owns the browser instance.
Different screen dimensions Add --viewport=WIDTHxHEIGHT The initial viewport is explicit.

8. Troubleshooting

“Could not connect to Chrome” with auto-connect

  • Cause: Edge is closed or remote debugging is disabled.
    Fix: Start Edge with --remote-debugging-port=9222, or enable remote debugging from edge://inspect.
  • Cause: The profile path points to the wrong channel.
    Fix: Match --user-data-dir to Stable, Beta, Dev, or Canary.
  • Cause: The profile has no DevToolsActivePort file.
    Fix: Restart Edge with remote debugging enabled and check the configured profile directory.

“Edge not found at executablePath”

  • Confirm that the executable exists on disk.
  • Use the path for the selected Edge channel.
  • Remember that Windows Canary normally installs under %LOCALAPPDATA%.
  • Escape Windows backslashes as \\ inside JSON strings.

WebView2 will not connect

  • Make sure the registry key uses the host executable’s exact filename.
  • Restart the host app after adding AdditionalBrowserArguments.
  • Verify that the profile path ends with \EBWebView.
  • Confirm that the host app is running before starting the MCP client.

The agent connects to the wrong browser profile

Use the user-data directory for the exact Edge channel you opened. If you need a predictable clean session, launch Edge with --isolated instead of auto-connecting to a personal profile.

The client rejects the configuration

The server arguments may be correct while the wrapper is wrong. VS Code uses servers and type: stdio; Copilot CLI uses mcpServers and type: local; many other clients use mcpServers without a type field.

9. Reliability, performance, and operational notes

  • Use isolated profiles for repeatability. Existing tabs, extensions, cookies, and redirects can change what the agent sees.
  • Use auto-connect only when state is required. It exposes the active browser session to the agent.
  • Pin the browser channel deliberately. Stable, Beta, Dev, and Canary have different executable and profile paths.
  • Keep viewport settings explicit. A fixed viewport makes screenshots and layout inspection easier to compare.
  • Check the target list when debugging. The DevTools endpoint can list attachable targets at http://localhost:9222/json/list.
  • Separate WebView2 profiles. The host app’s EBWebView directory is different from a normal Edge profile.
  • Expect launch overhead. Starting a fresh browser adds startup work; reusing a running session avoids that but carries profile and security risks.

10. Or skip the browser setup

If your goal is simply to capture a clean screenshot or PDF from a URL, ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns PNG, JPEG, WebP, or PDF output, and its MCP tools let AI agents call take_screenshot, get_page_info, and capture_pdf.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' }); const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and each response identifies the result with X-Page-Verdict and X-Billed headers. You can also use its MCP server with Claude, Cursor, or another MCP client.

There are 1,000 screenshots per month free with no card. Paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.

11. FAQ

Can Chrome DevTools MCP inspect Microsoft Edge?

Yes. The server supports Chromium browsers, including Microsoft Edge, when you provide the Edge executable or connect to a running profile.

Can it connect to an existing signed-in Edge browser?

Yes. Enable remote debugging and use --autoConnect with the matching --user-data-dir. The agent then inherits that session’s browser state.

Can it inspect a WebView2 app?

Yes. Enable WebView2 remote debugging, find the host profile ending in \EBWebView, and configure auto-connect with that directory.

Does WebView2 support the launch configuration?

No. WebView2 is created by its host application, so the documented method is auto-connect.

Which MCP configuration format should I use?

Use the format required by your client. VS Code uses servers with type: stdio; Copilot CLI uses mcpServers with type: local; many other clients omit the type field.

What should I use for a clean screenshot pipeline?

Use a launched Edge instance with an isolated profile when you need browser inspection. For URL-to-image or URL-to-PDF capture without managing a browser, use ScreenshotNeo’s API or MCP server.