Chrome DevTools MCP icon

Chrome DevTools MCP

let coding agents inspect console errors, requests and performance in Chrome browser.
Chrome DevTools MCP icon

About Chrome DevTools MCPv1.10.1

Last updated on

Chrome DevTools MCP gives an AI coding agent access to a live Chrome browser. The agent can navigate a page, reproduce an interaction, and inspect the browser evidence behind a problem. For a Linux developer chasing a failed request or a slow page load, that connects the code under discussion to what Chrome actually reports.

Debugging and performance tools

The server exposes console messages, network requests, screenshots, page snapshots, and matched CSS rules. An agent can inspect a failed request's headers and response, check a console error's stack trace, or examine the styles applied to an element. It can also record a performance trace and inspect Chrome's findings for issues affecting loading and responsiveness. Lighthouse audits cover accessibility, SEO, and best practices; performance investigation uses the trace tools.

Browser actions are part of the workflow too. The agent can open pages, click controls, fill forms, and emulate conditions such as a mobile viewport or a slower network. The useful distinction is that it can gather diagnostic evidence after reproducing a problem, rather than reporting only that a page looked wrong.

Using Chrome DevTools MCP on Linux

Add the server to an MCP-capable coding assistant using npx; it starts Chrome when a browser tool is first needed. The default browser has a visible window, while --headless runs without one. If Google Chrome and Chrome for Testing are supported, other Chromium-based browsers are not guaranteed to work.

Chrome DevTools MCP is a strong fit when the question depends on Chrome's console, network panel, or performance traces. For browser automation across Firefox and WebKit as well as Chrome, Playwright MCP is another option. Its accessibility-snapshot workflow also suits agents that need to inspect and operate page controls.

Questions worth knowing

What debugging information can it expose to an agent? Console messages and available stack traces, network requests and their details, page snapshots, screenshots, CSS rules, Lighthouse audit results, and performance traces with insights. Access to the browser also means the MCP client can inspect content in that browser session, so choose the session with that scope in mind.

Can it connect to an existing Chrome session? Yes. With Chrome 144 or later, enable remote debugging at chrome://inspect/#remote-debugging and use --autoConnect. Alternatively, start Chrome with a remote debugging port and a separate user-data directory, then supply its address with --browser-url or its WebSocket address with --wsEndpoint. Attaching to a running profile gives the agent access to that profile's open windows; a separate debugging profile is the more contained choice.

Chrome DevTools MCP is most useful when an agent needs to explain why a Chrome page behaves as it does. Its Chrome focus is the main reason to choose it for detailed diagnostics and the main reason to consider a broader browser automation tool for cross-browser work.

Supported platforms

Latest version

v1.10.1

Requirements

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

Rate this app

No ratings yet

No comment yet

Be the first to share your thoughts.

License

Apache-2.0

Latest version

v1.10.1
Report incorrect information

Recently updated software