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.
Chrome DevTools MCP
chrome-devtools-mcp lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
control and inspect a live Chrome browser. It acts as a Model-Context-Protocol
(MCP) server, giving your AI coding assistant access to the full power of
Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.