Expose Chrome runtime, DOM, network, console, and performance diagnostics to AI coding agents.
Looking for more MCP servers? Browse the full MCP tools directory or explore more tools in Developer Tools.
Chrome DevTools MCP operates below the application abstraction layer, where browser failures actually occur. It lets an agent inspect network requests, console errors, DOM state, performance traces, and rendering behavior instead of guessing why a page is empty or slow. The critical edge case is that DOM output is not equivalent to application state: hydration, XHR, GraphQL, service workers, and redirects can mutate the result after the initial document loads. Filter diagnostics before returning them because network payloads and console logs may contain cookies, authorization headers, tokens, or user data.
Choose Chrome DevTools MCP when you want an MCP server focused on Developer Tools and need tighter integration with your existing tools.
Good fit
Use the following configuration as a starting point for Claude Desktop or any compatible MCP client, then replace placeholder credentials with your own values.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest"
]
}
}
}These setup steps cover the typical installation flow for this MCP server.
Install Node.js 22 or a version supported by the installed Chrome DevTools MCP release.
Install Google Chrome Stable and verify that the browser can launch under the current user.
Add the Chrome DevTools MCP configuration to the MCP client.
Start with read-only inspection of console errors, network requests, DOM readiness, and performance.
Filter request URLs, headers, response bodies, local storage, and traces before returning them to the model.
Pro-Tip: Never expose a browser profile containing saved passwords, cookies, or active production sessions. Use a dedicated Chrome profile and a domain allowlist.
Pin the package version for CI or repeatable debugging instead of resolving @latest on every startup.
Common questions for Chrome DevTools MCP.
The browser can report document.readyState as complete while the application is still waiting for hydration or a GraphQL response. Wait for a required selector or response, assert record counts, detect interstitial markers, and fail with EXTRACTION_CONTRACT_FAILED when the expected state is absent.
Network logs, request headers, console output, local storage, and DOM snapshots can contain cookies, authorization headers, PII, and tokens. Redact those fields server-side and use an isolated browser profile before exposing diagnostics to an AI client.
| Feature | Chrome DevTools MCP | Competitor |
|---|---|---|
| Browser runtime diagnosis | ✅ Inspects console, DOM, network, rendering, and performance state. | ❌ Screenshot-only testing |
| Deterministic end-to-end testing | ❌ Primarily diagnostic and requires filtered artifacts. | ✅ Playwright test runner |