What is the Chrome DevTools MCP server?
Chrome DevTools MCP is a Model Context Protocol server that runs a real Chrome instance and exposes DevTools features as tools. An AI coding agent installs it with npx chrome-devtools-mcp@latest, then records performance traces, inspects network requests, takes screenshots and reads console messages during development.
Chrome DevTools MCP lets an AI coding agent control and inspect a live Chrome browser. It acts as a Model Context Protocol server, giving the agent access to Chrome DevTools for automation, debugging and performance analysis through puppeteer.
The server starts automatically the first time the agent calls a tool that needs a browser. Connecting the server on its own does not open Chrome; nothing launches until a tool runs.
What it changes in your workflow
- The agent can open a real page, click through it and read the result instead of guessing from source code alone.
- Performance traces come with actionable insights, not just raw numbers, so slow pages get a concrete next step.
- Network requests, console messages and source-mapped stack traces are available for the agent to read during a debugging session.
- A slim mode with fewer tools exists for agents that only need basic navigation and screenshots.
Setup flags that matter
| Flag | What it does |
|---|---|
| --headless | Runs Chrome without a visible window |
| --isolated | Uses a fresh browser profile per session |
| --no-performance-crux | Stops sending trace URLs to the CrUX API for field data |
| --no-usage-statistics | Opts out of the usage data Google collects by default |
Who it is for
Best for
- Developers who want an agent to verify a page actually works in a browser before calling a task done.
- Teams chasing a specific performance regression who want trace data pulled straight into the coding session.
- Anyone debugging layout or script errors who wants console output read back without switching windows.
Not for
- If your job is mostly browser debugging through a reverse proxy instead of DevTools traces, the agnt MCP server is the better fit for that.
- If your job is mostly catching CSS declarations that render but do nothing, CSS Noop Checker is the better fit for that.
- If your job is mostly reading Figma designs for context before writing code, Figma's MCP server is the better fit for that.
- If your job is mostly editing Penpot designs such as renaming layers, the Penpot MCP server is the better fit for that.
Connect Chrome DevTools MCP Server: Browser Automation for AI Agents to your AI client
npx -y chrome-devtools-mcp@latestAdd the config
Place the config above in your client's MCP settings, such as .mcp.json for Claude Code, .cursor/mcp.json for Cursor, or .vscode/mcp.json for VS Code.
Pick a mode
Use the default args for the full tool set, or add --slim and --headless to the args array for basic navigation and screenshots only.
Restart your client
Restart the editor or agent so it picks up the new server entry.
Send a first prompt
Ask the agent to check the performance of a URL. The browser launches automatically on the first tool call that needs it.
Review the trace
Read back the performance insights, network list or console output the agent reports from that run.
Client configuration
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}What you can do with it
- Real browser, not a mockEvery tool acts on an actual Chrome or Chrome for Testing instance through puppeteer, so results match what a user would see.
- Actionable performance tracesThe trace tools return specific insights and opportunities rather than a raw JSON dump the agent has to interpret itself.
- Source-mapped console errorsConsole messages include stack traces resolved through source maps, so an error points at the original line of source.
- Slim mode for simple tasksThe --slim flag trims the tool list to navigation and screenshots when a full debugging session is not needed.
- Persistent Chrome profilesAdvanced flags let the browser reuse a profile location, so logged-in sessions survive between runs.
- CrUX field data optionPerformance tools can pull real-user experience data from the Chrome User Experience Report alongside lab results.
- CLI without MCPA separate CLI runs the same automation outside of an MCP client for scripting or CI.
Tools it exposes
performance_trace
Records a Chrome DevTools performance trace and returns actionable insights instead of raw trace data.
performance_analyze
Reads an existing trace and extracts specific bottlenecks on request.
network_requests
Lists network requests made during a page load or interaction.
take_screenshot
Captures the current state of the page as an image.
list_console_messages
Returns console output, including source-mapped stack traces for errors.
navigate_page
Loads a URL or navigates browser history.
click
Clicks an element identified from a prior page snapshot.
fill_form
Fills one or more form fields in a single call.
Frequently asked questions
What is the Chrome DevTools MCP server?
It is a Model Context Protocol server that gives an AI coding agent control of a real Chrome browser. The agent can record performance traces, read network requests, take screenshots and read console output through tools instead of guessing from source code.
How do I install the Chrome DevTools MCP server?
Add an entry to your MCP client's config with command npx and args -y and chrome-devtools-mcp@latest, then restart the client. The server starts itself the first time a tool that needs a browser is called, so no separate install step runs beforehand.
Which AI coding agents work with Chrome DevTools MCP?
The project names Antigravity, Claude, Cursor and Copilot as clients that control and inspect Chrome through this server. Any MCP client that can launch a local stdio command should be able to add the same npx entry.
Does Chrome DevTools MCP support headless mode?
Yes. Add --headless to the args list to run without a visible browser window, which suits CI or background sessions. Pair it with --slim for a smaller tool set if the agent only needs navigation and screenshots.
What is slim mode?
Slim mode, enabled with --slim, trims the available tools down to the basics needed for navigation and screenshots. It suits agents doing simple browser tasks that do not need full performance or network tooling.
Does Chrome DevTools MCP send data anywhere?
Performance tools can send trace URLs to the Google CrUX API for field data unless --no-performance-crux is set. Separately, usage statistics are collected by default and can be turned off with --no-usage-statistics or by setting the CI environment variable.
Can it attach to Chrome running on Android?
The project's advanced usage guide covers connecting to an existing Chrome instance and debugging on Android rather than launching a fresh desktop browser each time. Check that guide for the exact flags needed for a remote or mobile target.