claudekit / tools / chrome-devtools
[ MCP · Development ]

Chrome DevTools MCP

An MCP server that lets AI agents control and inspect a live Chrome browser for performance analysis, debugging, and automation.

ChromeDevTools/chrome-devtools-mcp ·updated
$ /plugin install chrome-devtools-mcp copy

What it does

Chrome DevTools MCP exposes the Chrome DevTools Protocol to AI agents so they can drive a real browser — take screenshots, analyze performance traces, inspect network requests, and capture memory snapshots — without switching between editor and browser.

Features

  • Performance analysis — start/stop Chrome DevTools performance traces, analyze insights, take memory snapshots
  • Debugging — take screenshots, inspect console messages, run Lighthouse audits, execute scripts
  • Network — list and inspect network requests in detail
  • Browser automation — click, type, fill forms, upload files, send keystrokes — Puppeteer-based
  • Navigation — navigate pages, open new tabs, switch tabs, wait for conditions
  • Emulation — device emulation, page resize

Install options

Pick one of these install modes — don’t install both.

  • MCP only — lightweight, connects the MCP server only
  • Plugin — full package including MCP + skills + slash commands

If you previously installed the MCP-only mode, remove that MCP config first before switching to the Plugin install.

Requirements

  • Node.js v20.19 or later (maintenance LTS)
  • Chrome latest stable

Use cases

  1. Screenshot a page after a UI change to visually verify it, then fix issues directly in the editor.
  2. Trace page load performance to find bottlenecks and propose optimizations.
  3. Automate user flows (form fills, button clicks) for ad-hoc E2E testing.

When to use it

  • Reproduce and debug UI bugs without copying stack traces between windows
  • Profile a page and have Claude summarize the bottlenecks
  • Drive E2E flows for manual testing without writing a full Playwright script
§ 6

See also

same category · curated
[01]
[Plugin] Codex Plugin for Claude Code · Use Codex from Claude Code to review code or delegate tasks. An OpenAI-published plugin that exposes standard reviews, adversarial reviews, and task delegation as slash commands, plus a Codex subagent and background-job tracking.
tool · claudekit.io / tools / codex-plugin-cc
[02]
[Plugin] Andrej Karpathy Skills · A single `CLAUDE.md` file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
tool · claudekit.io / tools / andrej-karpathy-skills
[03]
[Plugin] Code Review · Automated code review for pull requests using multiple specialized agents with confidence-based scoring to filter false positives.
tool · claudekit.io / tools / code-review
§ 7

Frequently Asked Questions

frequently asked
§ 7.1
What is Chrome DevTools MCP?
An MCP server that lets AI agents control and inspect a live Chrome browser — screenshots, network and performance analysis, Lighthouse audits, and Puppeteer-based automation.
§ 7.2
Where does it run?
Claude Code, Claude Desktop, VS Code, and Cursor.
§ 7.3
How do I install it?
Pick MCP-only or Plugin (don't install both). The Plugin install in Claude Code is `/plugin install chrome-devtools-mcp`, which bundles the MCP plus skills and slash commands.
§ 7.4
What are the prerequisites?
Node.js v20.19+ (maintenance LTS) and the latest stable Chrome.
§ 7.5
What can it do?
Performance tracing (start/stop, insights, memory snapshots), debugging (screenshots, console messages, Lighthouse audits, script execution), network analysis, browser automation (click, type, forms, file upload), navigation, and device emulation.
§ 7.6
How do I switch between MCP and Plugin install?
If you previously installed via MCP, remove the existing MCP config before installing the Plugin version.