Chrome DevTools MCP
Updated
An MCP server that lets AI agents control and inspect a live Chrome browser for performance analysis, debugging, and automation.
/plugin install chrome-devtools-mcp 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
- Screenshot a page after a UI change to visually verify it, then fix issues directly in the editor.
- Trace page load performance to find bottlenecks and propose optimizations.
- 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
Frequently Asked Questions
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.
Where does it run?
Claude Code, Claude Desktop, VS Code, and Cursor.
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.
What are the prerequisites?
Node.js v20.19+ (maintenance LTS) and the latest stable Chrome.
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.
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.