How to Connect VS Code to Chrome DevTools with MCP

Connecting VS Code to the Chrome DevTools MCP server lets Copilot's agent control and inspect a live Chrome browser. It can record performance traces, read console messages, check network requests and take screenshots. As of October 2026, Google's README calls the project "Chrome DevTools for agents"; the package name is still chrome-devtools-mcp.

Checked against: Chrome DevTools MCP README and VS Code's MCP server docs on 28 October 2026. eSEOspace did not run these steps; menus can change, so follow the vendor's page if it differs.

Before you start

The README lists these requirements:

• Node.js, an LTS version.
• Chrome, the current stable version or newer.
• npm.

You also need VS Code with GitHub Copilot. No account or sign-in is needed for the server itself.

The README says only Google Chrome and Chrome for Testing are officially supported. Other Chromium-based browsers may work but are not guaranteed.

Steps

Option 1: Install as a plugin (recommended)

The Chrome team's client configuration guide gives these steps for Copilot and VS Code:

1. Open the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows and Linux).
2. Search for and run Chat: Install Plugin From Source.
3. Paste in the repository name: ChromeDevTools/chrome-devtools-mcp.

The plugin adds the MCP server plus skills such as a11y-debugging, debug-optimize-lcp and memory-leak-debugging.

Option 2: Install only the MCP server

The guide has an Install Server button for VS Code. Or use the VS Code CLI. For macOS and Linux:

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

The guide has a separate PowerShell version for Windows. You can also run MCP: Add Server, choose Command (stdio) and use the README's standard config:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

That block uses mcpServers, VS Code's portable format for a workspace-root .mcp.json or ~/.copilot/mcp-config.json. VS Code's configuration reference says code --add-mcp writes to your user-profile config in the older VS Code format, which uses servers. VS Code still supports that format for compatibility but labels it deprecated in its guided flow.

Check that it works

The README suggests this first prompt and says your client should open the browser and record a performance trace. It also notes the browser starts only when a tool needs it, not when the server connects.

Example prompts:

• "Check the performance of https://developers.chrome.com"
• "Open <your URL here> and list any console errors." This uses tools such as navigate_page and list_console_messages.
• "Run a Lighthouse audit on <your URL here> and summarize the top issues." The tool reference lists lighthouse_audit.

Expand the tool call in chat to confirm it came from the Chrome DevTools server. VS Code says the answer must reflect the tool's output, not just sound plausible.

Permissions and safety

The README's disclaimer is direct: the server "exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools."

• Turn off data sharing if you need to. Usage statistics are on by default; add --no-usage-statistics to the args. Performance tools may send trace URLs to Google's CrUX API; --no-performance-crux disables that.
• Avoid sensitive sessions. Don't point it at browsers logged in to admin panels, payment pages or customer data.
• Watch powerful tools. The tool reference includes evaluate_script, which runs JavaScript in the page, and install_extension.
• Approve with care. VS Code asks you to review tool approval requests. See MCP permissions and approvals.

Pages you inspect can contain hidden instructions. Read data exfiltration through MCP and prompt injection through tool results, and see the MCP Security Center.

If it doesn't work

• No browser opens. The README says the server starts Chrome only when a tool needs a running browser. Ask for a task, such as a performance check.
• The server doesn't start. Check Node.js, npm and Chrome versions. Then run MCP: List Servers, select the server and choose Show Output.
• Using the Antigravity extension in VS Code. The client guide says to configure the server in Antigravity's mcp_config.json, not VS Code's Copilot settings.
• Tools look out of date. Run MCP: Reset Cached Tools.

The Chrome team also keeps a troubleshooting guide, and the plugin includes a troubleshooting skill for connection problems.

Next step

Run one performance check on a public page before you use it on your own app. For the full list of 60 tools and options, read the Chrome DevTools MCP server profile. For other editors and apps, browse the MCP connection guides.

Frequently asked questions