Skip to content
don’t make it ugly
All resources

MCP serverAgent Resources, Tools

Chrome DevTools MCP

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

Open sourceFree
Preview of Chrome DevTools MCP

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 friendliness

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.

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

  • Playwright MCP
    Preview of 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 me
  • DesignMD
    Preview of DesignMD

    DesignMD

    Point it at a URL and it extracts that site's design system as a DESIGN.md.

    excellent agent friendlinessTool
  • DESIGNMD by Hyperbrowser
    Preview of DESIGNMD by Hyperbrowser

    DESIGNMD by Hyperbrowser

    A single-purpose tool that extracts a DESIGN.md from any URL you give it.

    good agent friendlinessToolFree
  • OpenDesign
    Preview of OpenDesign

    OpenDesign

    An open-source desktop app that turns your existing coding agent into a design tool.

    excellent agent friendlinessToolFreeOpen source