---
name: Chrome DevTools MCP
slug: chrome-devtools-mcp
url: "https://dontmakeitugly.com/resources/chrome-devtools-mcp"
website: "https://github.com/ChromeDevTools/chrome-devtools-mcp"
github: "https://github.com/ChromeDevTools/chrome-devtools-mcp"
type: mcp-server
categories:
  - agent-resources
  - tools
tags:
  - mcp
  - browser
  - devtools
  - debugging
  - performance
  - css
  - chrome
frameworks:
  - agnostic
pricing: free
license: Apache-2.0
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - mcp
  - github
  - npm
  - documentation
installCommand: "claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest"
difficulty: intermediate
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Chrome DevTools MCP

Let your agent inspect, debug and profile a live Chrome tab.

- Type: MCP server
- Categories: Agent Resources, Tools
- Pricing: Free · License: Apache-2.0
- Open source: yes
- Works with: Framework agnostic, MCP, Chrome DevTools Protocol

## What it is

Google's official Chrome DevTools MCP server connects a coding agent to a running Chrome instance with access to the DevTools protocol: screenshots, DOM and CSS inspection, console messages, network requests and performance traces. It complements Playwright MCP with deeper debugging.

## Why it's here

When something is visually wrong and you can't explain why, this lets the agent inspect the actual computed styles and layout instead of guessing from source.

## Best for

- debugging layout and CSS
- performance checks
- inspecting a live page

## Links

- Website: https://github.com/ChromeDevTools/chrome-devtools-mcp
- GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp

## Can my agent use this?

Yes, this is built for agents. Follow the README to add it, then ask the agent to inspect a specific element or run a performance trace.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: MCP, GitHub, npm, Docs.
Install: `claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest`

## Prompt to hand your agent

```text
Set up and use Chrome DevTools MCP in this project.

What it is: Let your agent inspect, debug and profile a live Chrome tab.

Website: https://github.com/ChromeDevTools/chrome-devtools-mcp
GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp
Install: claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Use it specifically for:
- debugging layout and CSS
- performance checks
- inspecting a live page

How you can access it: MCP, GitHub, npm, Docs.
Works with: Framework agnostic.
License: Apache-2.0. Respect it.

Follow the official setup instructions above. Once available, use it when it is relevant to the task rather than by default, and tell me what it changed.
```

## Related

- [Playwright MCP](https://dontmakeitugly.com/resources/playwright-mcp.md): Give your agent a browser so it can see and test what it built.
- [DesignMD](https://dontmakeitugly.com/resources/designmd.md): Point it at a URL and it extracts that site's design system as a DESIGN.md.
- [DESIGNMD by Hyperbrowser](https://dontmakeitugly.com/resources/hyperbrowser-designmd.md): A single-purpose tool that extracts a DESIGN.md from any URL you give it.
- [OpenDesign](https://dontmakeitugly.com/resources/open-design.md): An open-source desktop app that turns your existing coding agent into a design tool.

## In collections

- [Best resources for designing with Claude Code](https://dontmakeitugly.com/collections/building-with-claude-code.md)

Chrome DevTools MCP is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.