Chrome DevTools MCP server enters public preview
A public preview of the Chrome DevTools Model Context Protocol (MCP) server is now available. The server links Chrome DevTools directly to AI coding agents, enabling those agents to run, inspect, and trace web pages inside Chrome. The integration aims to reduce blind spots in generated code by giving agents live access to runtime state, network activity, console output, layout, and performance traces.
What is MCP and what this server adds
The Model Context Protocol (MCP) is an open standard for connecting LLMs to external tools and data sources. The Chrome DevTools MCP server exposes DevTools capabilities over MCP so an AI agent can drive a browser instance and use DevTools tooling as part of its toolset. For background on MCP, see the MCP docs at https://modelcontextprotocol.io/docs/getting-started/intro.
Key capabilities provided by the Chrome DevTools MCP server include:
- Debug web pages in Chrome: start Chrome, load pages, and inspect runtime state.
- Analyze performance: start and collect DevTools performance traces and examine metrics like LCP.
- Diagnose errors: inspect network requests, CORS failures, and console logs.
- Simulate user flows: navigate, fill forms, and click elements to reproduce complex flows.
- Fix layout and styling issues: inspect DOM and CSS live to produce concrete layout suggestions.
A published tool reference lists all available DevTools tools and their behaviors: https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md.
Example workflows
Several practical workflows demonstrate how an agent enhanced with DevTools access changes the feedback loop:
- Verify code changes in real time: generate a patch and have the agent load the updated page and confirm that the issue is resolved.
- Diagnose network and console errors: instruct the agent to inspect failing resources on a local server and report request headers, status codes, and console stack traces.
- Reproduce user interactions: have the agent run through a user journey—navigation, form input, and submission—while observing the DOM and network timeline.
- Run performance audits: command the agent to start a trace, analyze CPU and rendering time, and highlight potential causes of high LCP or slow paints.
Suggested short prompt examples include:
Please check the LCP of web.dev.
Verify in the browser that the change works as expected.
Getting started
To enable the Chrome DevTools MCP server in an MCP client, add a server entry like the following to the client configuration:
{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest"] } } }
More setup details live in the Chrome DevTools MCP documentation on GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#chrome-devtools-mcp.
Contributing and feedback
The project is starting with a public preview and will evolve based on community feedback. Discussion and issue reporting are routed through the project's GitHub pages:
- Discussions: https://github.com/ChromeDevTools/chrome-devtools-mcp/discussions
- Issues: https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/new/choose
Original source: https://developer.chrome.com/blog/chrome-devtools-mcp?
