← All open source projects

Chrome DevTools MCP

ChromeDevTools/chrome-devtools-mcp

Chrome DevTools MCP is an MCP server that gives coding agents access to live Chrome, DevTools, debugging, and performance analysis.

Forks 2,883
Language TypeScript
License Apache-2.0
Synced 2026-06-27

What it is

Chrome DevTools MCP is a Model Context Protocol server for development agents working with a live Chrome browser.

The project appeared at the intersection of browser debugging and agent tools: an agent should not only read code, but also inspect page behavior in a real browser.

Its main task is to expose DevTools capabilities: inspection, automation, debugging, performance measurement, and page analysis.

How the project is built

Inside the project are a TypeScript package, tool reference, client configuration guide, requirements, troubleshooting, and design principles.

The project also provides a command-line interface for scenarios where an MCP client is not used directly.

How people use it

A normal scenario is to connect the server in a client, open Chrome, and ask the agent to inspect a page, collect performance traces, or find an interface bug.

For web development, this matters because many defects are only visible in the browser: layout, network, console, resource loading, and real user events.

Practical example

MCP client configuration

This example shows a typical connection shape: the client runs the package through npx and receives DevTools tools.

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

The project’s strength is its connection to Chrome DevTools. The agent gets actual developer tools rather than an abstract picture of a page.

Strengths

Another advantage is repeatability: scenarios can be run again, results compared, and complex interfaces debugged with more structure.

The limitation is that browser access requires trust. The agent can see pages, perform actions, and interact with the user environment.

Limitations

The MCP setup also does not remove manual review, especially when product detail, visual quality, and user meaning matter.

Chrome DevTools MCP best fits teams that already use coding agents and want to give them real browser verification.

Who it fits

For simple sites with little behavior it may be too much, but in performance and interface debugging it becomes useful quickly.

In the catalog, the project matters as a fresh example of infrastructure around agent development, where the browser becomes a verifiable environment rather than code guesswork.

A practical start is to connect it in a limited environment, understand access rights clearly, and begin with safe read-and-analysis checks.

For agent-assisted development, the main advantage of Chrome DevTools MCP is that verification moves closer to reality. Code can look correct while the page still breaks because of resource loading, screen size, network failure, or a browser event. DevTools access lets the agent work with these facts directly instead of inferring behavior only from files.