Skill Detail

Chrome DevTools MCP Browser Debugging and Performance Analysis

Chrome DevTools MCP connects an MCP-compatible agent to a live Chrome browser for debugging, automation, and performance work. It exposes Chrome DevTools capabilities through MCP, so agents can inspect network traffic, collect traces, capture screenshots, and automate browser actions from the same server.

Browser AutomationMCP
Browser Automation MCP Security Reviewed
โญ 34.2k GitHub stars โฌ‡ 1.8M/wk npm
INSTALL WITH ANY AGENT
npx skills add agentskillexchange/skills --skill chrome-devtools-mcp-browser-debugging-performance-analysis Copy
Works best when you want a reusable capability, not another fragile one-off prompt.
At a glance
Tools required
Node.js v20.19+, Google Chrome, npm
Install & setup
npx -y chrome-devtools-mcp@latest
Author
ChromeDevTools
Publisher
Open Source Project
Last updated
Apr 7, 2026
Quick brief

Chrome DevTools MCP is an official ChromeDevTools project that turns Google Chrome into an MCP-accessible debugging and automation surface for coding agents. Instead of treating the browser like a black box, this server gives agents structured access to core DevTools workflows: page inspection, console analysis, network debugging, screenshots, trace capture, and browser automation. The project uses Puppeteer for reliable actions while also surfacing deeper debugging and performance capabilities that are hard to get from generic browser-control layers alone.

How it works

What this skill actually does

For teams building browser-heavy products, the job-to-be-done is clear: let an agent reproduce issues in a real browser, inspect what happened, and report back with evidence. Chrome DevTools MCP is especially useful when an agent needs to debug failed page loads, investigate JavaScript errors, profile runtime behavior, or collect performance insights from traces. Because it is packaged as an MCP server, the same tool can be plugged into clients such as Claude Code, Codex, Cursor, Copilot, or Gemini-compatible workflows.

Integration is straightforward. The README documents a standard MCP configuration using npx -y chrome-devtools-mcp@latest, with optional flags such as --slim and --headless for lighter browser-task modes. Upstream documentation also includes tool references, troubleshooting notes, and client-specific setup examples. This makes Chrome DevTools MCP a strong fit for Browser Automation skills that need real debugging depth, not just clicks and screenshots.