Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -508,6 +508,12 @@ The Chrome DevTools MCP server supports the following configuration option:
- **Type:** string
- **Choices:** `stable`, `canary`, `beta`, `dev`

- **`--browser`**
Specify which browser to use. Defaults to Chrome.
- **Type:** string
- **Choices:** `chrome`, `edge`
- **Default:** `chrome`

- **`--logFile`/ `--log-file`**
Path to a file to write debug logs to. Set the env variable `DEBUG` to `*` to enable verbose logs. Useful for submitting bug reports.
- **Type:** string
Expand Down Expand Up @@ -750,6 +756,100 @@ For more details on remote debugging, see the [Chrome DevTools documentation](ht

Please consult [these instructions](./docs/debugging-android.md).

### Additional browser support

In addition to Chrome, Chrome DevTools MCP supports Microsoft Edge. Edge must be installed separately. It is not bundled or downloaded by the MCP server.

#### Microsoft Edge

Pass `--browser=edge` to use the Microsoft Edge browser:

```json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--browser=edge"]
}
}
}
```

You can combine `--browser=edge` with other flags such as `--channel`, `--headless`, `--autoConnect`, and `--executablePath`.

#### Edge channels

Edge supports `stable`, `beta`, `dev`, and `canary` channels selected via `--channel`.

```bash
npx chrome-devtools-mcp@latest --browser=edge --channel=beta
```

#### Edge executable paths

The MCP server automatically detects Edge installations in the standard locations:

| Platform | Stable channel path |
| ----------- | ---------------------------------------------------------------- |
| **Windows** | `C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe` |
| **macOS** | `/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge` |
| **Linux** | `/opt/microsoft/msedge/msedge` or `/usr/bin/microsoft-edge` |

If Edge is installed in a non-standard location, use `--executablePath` to specify the path manually.

#### Edge user data directory

When using `--browser=edge`, the user data directory pattern changes from `chrome-profile-$CHANNEL` to `edge-profile-$CHANNEL`:

- Linux / macOS: `$HOME/.cache/chrome-devtools-mcp/edge-profile-$CHANNEL`
- Windows: `%HOMEPATH%/.cache/chrome-devtools-mcp/edge-profile-$CHANNEL`

#### Auto-connecting to a running Edge instance

Use `--autoConnect` with `--browser=edge` to connect to an already-running Edge instance:

```json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--autoConnect",
"--browser=edge"
]
}
}
}
```

Before connecting, enable remote debugging in Edge by navigating to `edge://inspect/#remote-debugging`.

#### Manual connection to a running Edge instance

Edge uses the same remote debugging protocol as Chrome. Start Edge with a remote debugging port and connect via `--browser-url`:

**Windows**

```bash
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\edge-profile-stable"
```

**macOS**

```bash
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9222 --user-data-dir=/tmp/edge-profile-stable
```

**Linux**

```bash
/opt/microsoft/msedge/msedge --remote-debugging-port=9222 --user-data-dir=/tmp/edge-profile-stable
```

Then configure the MCP server with `--browser-url=http://127.0.0.1:9222`.

## Known limitations

See [Troubleshooting](./docs/troubleshooting.md).
2 changes: 2 additions & 0 deletions skills/chrome-devtools/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooti

**Browser lifecycle**: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: `npx chrome-devtools-mcp@latest --help`.

**Browser selection**: Defaults to Chrome stable. Use `--browser=edge` for Microsoft Edge, `--channel=stable|beta|dev|canary` for a specific channel, or `--executablePath` for a custom browser binary.

**Page selection**: Tools operate on the currently selected page. Use `list_pages` to see available pages, then `select_page` to switch context.

**Element interaction**: Use `take_snapshot` to get page structure with element `uid`s. Each element has a unique `uid` for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.
Expand Down
11 changes: 3 additions & 8 deletions src/McpContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import fs from 'node:fs/promises';
import path from 'node:path';

import {isExtensionUrl} from './browser.js';
import type {TargetUniverse} from './DevtoolsUtils.js';
import {UniverseManager} from './DevtoolsUtils.js';
import {McpPage} from './McpPage.js';
Expand Down Expand Up @@ -506,10 +507,7 @@ export class McpContext implements Context {
const allTargets = await this.browser.targets();

const serviceWorkers = allTargets.filter(target => {
return (
target.type() === 'service_worker' &&
target.url().includes('chrome-extension://')
);
return target.type() === 'service_worker' && isExtensionUrl(target.url());
});

for (const serviceWorker of serviceWorkers) {
Expand Down Expand Up @@ -588,10 +586,7 @@ export class McpContext implements Context {

const allTargets = this.browser.targets();
const extensionTargets = allTargets.filter(target => {
return (
target.url().startsWith('chrome-extension://') &&
target.type() === 'page'
);
return isExtensionUrl(target.url()) && target.type() === 'page';
});

for (const target of extensionTargets) {
Expand Down
3 changes: 2 additions & 1 deletion src/McpResponse.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import type {ParsedArguments} from './bin/chrome-devtools-mcp-cli-options.js';
import {isExtensionUrl} from './browser.js';
import {ConsoleFormatter} from './formatters/ConsoleFormatter.js';
import {IssueFormatter} from './formatters/IssueFormatter.js';
import {NetworkFormatter} from './formatters/NetworkFormatter.js';
Expand Down Expand Up @@ -567,7 +568,7 @@ Call ${handleDialog.name} to handle it before continuing.`);

const {regularPages, extensionPages} = allPages.reduce(
(acc: {regularPages: Page[]; extensionPages: Page[]}, page: Page) => {
if (page.url().startsWith('chrome-extension://')) {
if (isExtensionUrl(page.url())) {
acc.extensionPages.push(page);
} else {
acc.regularPages.push(page);
Expand Down
23 changes: 23 additions & 0 deletions src/bin/chrome-devtools-mcp-cli-options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
* SPDX-License-Identifier: Apache-2.0
*/

import os from 'node:os';

import type {YargsOptions} from '../third_party/index.js';
import {yargs, hideBin} from '../third_party/index.js';

Expand Down Expand Up @@ -116,6 +118,12 @@ export const cliOptions = {
choices: ['stable', 'canary', 'beta', 'dev'] as const,
conflicts: ['browserUrl', 'wsEndpoint', 'executablePath'],
},
browser: {
type: 'string',
description: 'Specify which browser to use. Defaults to Chrome.',
choices: ['chrome', 'edge'] as const,
default: 'chrome',
},
logFile: {
type: 'string',
describe:
Expand Down Expand Up @@ -272,6 +280,16 @@ export function parseArguments(version: string, argv = process.argv) {
) {
args.channel = 'stable';
}
// Edge Canary is not available on Linux.
if (
args.browser === 'edge' &&
args.channel === 'canary' &&
os.platform() === 'linux'
) {
throw new Error(
`Edge Canary is not available on Linux. Use --executablePath to specify a custom Edge binary.`,
);
}
return true;
})
.example([
Expand All @@ -291,6 +309,7 @@ export function parseArguments(version: string, argv = process.argv) {
['$0 --channel canary', 'Use Chrome Canary installed on this system'],
['$0 --channel dev', 'Use Chrome Dev installed on this system'],
['$0 --channel stable', 'Use stable Chrome installed on this system'],
['$0 --browser edge', 'Use Microsoft Edge instead of Chrome'],
['$0 --logFile /tmp/log.txt', 'Save logs to a file'],
['$0 --help', 'Print CLI options'],
[
Expand Down Expand Up @@ -323,6 +342,10 @@ export function parseArguments(version: string, argv = process.argv) {
'$0 --auto-connect --channel=canary',
'Connect to a canary Chrome instance (Chrome 144+) running instead of launching a new instance',
],
[
'$0 --auto-connect --browser=edge',
'Connect to a stable Edge instance running instead of launching a new instance',
],
[
'$0 --no-usage-statistics',
'Do not send usage statistics https://github.com/ChromeDevTools/chrome-devtools-mcp#usage-statistics.',
Expand Down
Loading