MCP serverAgent Resources, Tools
Chrome DevTools MCP
Let your agent inspect, debug and profile a live Chrome tab.

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
Can my agent use this?
Agent excellent agent friendlinessYes, 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.
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@latestRelated resources
Playwright MCP 
Playwright MCP
Give your agent a browser so it can see and test what it built.
excellent agent friendlinessMCP serverFreeOpen sourceStaff pickUsed by meDesignMD 
DesignMD
Point it at a URL and it extracts that site's design system as a DESIGN.md.
excellent agent friendlinessToolDESIGNMD by Hyperbrowser 
DESIGNMD by Hyperbrowser
A single-purpose tool that extracts a DESIGN.md from any URL you give it.
good agent friendlinessToolFreeOpenDesign 
OpenDesign
An open-source desktop app that turns your existing coding agent into a design tool.
excellent agent friendlinessToolFreeOpen source