Plugin

chrome-devtools-mcp

Name: chrome-devtools-mcp
Author: az9713

Reliable automation, in-depth debugging, and performance analysis in Chrome using Chrome DevTools and Puppeteer

npx claudepluginhub az9713/chrome-devtools-mcp --plugin chrome-devtools-mcp

Component Overview

Skills

MCP Servers

Component Details

Skills (6)

a11y-debugging

/a11y-debugging

Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.

chrome-devtools-cli

/chrome-devtools-cli

Use this to skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.

chrome-devtools

/chrome-devtools

Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration).

debug-optimize-lcp

/debug-optimize-lcp

Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.

memory-leak-debugging

/memory-leak-debugging

Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to analyze heapsnapshots or run memory leak detection tools like memlab.

troubleshooting

/troubleshooting

Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.

MCP Servers (1)

Connects to external services

chrome-devtools

README

This is a personal learning fork of ChromeDevTools/chrome-devtools-mcp. It adds a plain-English tutorial and a real-world demo that walk you through the tool from zero — no prior knowledge of Chrome, DevTools, MCP, or the CLI required.

New here? Start with demo-health-check/ ↓

✦ Added in this fork: two end-to-end demos

If terms like MCP server, Chrome DevTools Protocol, performance trace, or Lighthouse feel unfamiliar — you're not alone, and you're in the right place.

This fork adds two self-contained demos — together they cover 26 of 29 chrome-devtools-mcp tools.

Demo 1 — `demo-health-check/` — Website health audit (CNN.com)

File	What it is	Start here if…
`demo-health-check/quickstart.md`	A hands-on project: produce a real Website Health Report using 7 of the 29 tools, with 6 copy-paste prompts	You want to learn by doing
`demo-health-check/cnn-case-study/report.md`	A complete health report for CNN.com — Core Web Vitals, 52 third-party vendors, 3,906ms of layout thrashing, cache issues, console errors	You want to see what output looks like
`demo-health-check/cnn-case-study/walkthrough.md`	Step-by-step annotated walkthrough: every tool used, every input/output, every obstacle — the full story behind the report	You want to understand how it works
`demo-health-check/reference.md`	Complete reference for all 29 tools, architecture, connection modes, daemon/CLI, and configuration	You want the full picture

Demo 2 — `demo-shopping/` — Agentic shopping workflow (saucedemo.com)

An AI agent runs a complete e-commerce purchase flow autonomously: login → browse → multi-tab comparison → cart → mobile emulation → checkout → order confirmation. Covers the 18 interaction tools not used in Demo 1.

File	What it is
`demo-shopping/report.md`	Findings: broken telemetry, React event quirk, heap memory baseline, $140.34 order
`demo-shopping/walkthrough.md`	Full annotated walkthrough of all 18 tools with inputs, outputs, and obstacles
`demo-shopping/order-confirmation.png`	Screenshot of "Thank you for your order!"
`demo-shopping/memory-before-checkout.heapsnapshot`	6.7 MB V8 heap dump — open in Chrome DevTools → Memory

What else can you build with it? → `use-cases.md`

50+ agentic workflows across QA, performance, SEO, e-commerce, research, security, and personal productivity — with the specific tools each one uses and why CDP beats alternatives.

What this tool actually does

chrome-devtools-mcp gives your AI assistant (Claude, Gemini, Cursor, Copilot…) the ability to control and inspect a real Chrome browser. Instead of just reading and writing text files, your AI can:

Open web pages and take screenshots
Read the page's structure like a screen reader
Collect live console errors and network requests
Run Lighthouse audits (accessibility, SEO, best practices)
Record performance traces and measure Core Web Vitals (LCP, CLS, INP)

You interact with it through plain English — "Check the performance of this page" — and the AI figures out which of the 29 tools to call.

No experience needed

The demo was designed for someone who has never opened Chrome DevTools, never used an MCP server, and has only just started using an AI coding assistant. Every concept is explained from first principles before it is used.