Esta página se muestra en inglés. Una traducción al español está en curso.
MCP ConfigsApr 4, 2026·3 min de lectura

Chrome DevTools MCP — Browser Debugging for AI Agents

Give your AI coding agent full access to Chrome DevTools for browser automation, debugging, and performance analysis. Works with Claude, Cursor, Copilot, and 15+ AI tools.

Introducción

Chrome DevTools MCP is an official Model Context Protocol server that lets your AI coding agent control and inspect a live Chrome browser. With 33,100+ GitHub stars and 29 built-in tools, it provides reliable browser automation via Puppeteer, advanced network debugging, console analysis, and performance tracing — all accessible from Claude Code, Cursor, Copilot, VS Code, and 15+ other AI tools.

Best for: developers who need AI-assisted browser testing, debugging, and performance analysis. Works with: Claude Code, Cursor, GitHub Copilot, VS Code, Cline, Gemini CLI, JetBrains AI, Windsurf, and more. Setup time: under 1 minute.


Chrome DevTools MCP — Full Feature Reference

Core Capabilities

Chrome DevTools MCP provides 29 tools organized into 6 categories:

Input & Automation

  • click, type, hover, select, drag — Interact with page elements using CSS selectors
  • fill_form — Fill entire forms with a single command
  • upload_file — Upload files to input elements
  • press_key — Simulate keyboard events
  • handle_dialog — Accept or dismiss browser dialogs

Navigation & Pages

  • navigate — Go to any URL
  • new_page, close_page, select_page, list_pages — Manage browser tabs
  • wait_for — Wait for selectors, navigation, or timeouts
  • take_screenshot — Capture full-page or element screenshots
  • take_snapshot — Get accessible page structure (DOM snapshot)

Network & Console

  • list_network_requests — Monitor all HTTP requests and responses
  • get_network_request — Inspect individual request details
  • list_console_messages — Read browser console output
  • get_console_message — Get specific console messages

Performance

  • performance_start_trace / performance_stop_trace — Record Chrome performance traces
  • performance_analyze_insight — Get AI-friendly performance analysis
  • lighthouse_audit — Run full Lighthouse audits

Device Emulation

  • emulate — Simulate mobile devices, screen sizes, and network conditions
  • resize_page — Change viewport dimensions

Requirements

  • Node.js v20.19 or newer LTS
  • Chrome (current stable or newer)
  • npm

Slim Mode vs Full Mode

Feature Full Mode (default) Slim Mode
Tools 29 ~12 core tools
Token usage Higher 47% less
Best for Full debugging & analysis Basic automation & testing

FAQ

Q: What is Chrome DevTools MCP? A: An MCP server that gives AI coding agents (Claude, Cursor, Copilot) access to Chrome DevTools for browser automation, debugging, and performance analysis. It uses Puppeteer under the hood and exposes 29 tools via the Model Context Protocol.

Q: Is Chrome DevTools MCP free? A: Yes, it's fully open-source under the MIT license.

Q: How do I install Chrome DevTools MCP? A: Add {"mcpServers": {"chrome-devtools": {"command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"]}}} to your .mcp.json and restart your AI tool.


🙏

Fuente y agradecimientos

Created by ChromeDevTools. Licensed under MIT.

chrome-devtools-mcp — ⭐ 33,100+

Thank you to the Chrome DevTools team for building this essential bridge between AI agents and browser debugging.

Discusión

Inicia sesión para unirte a la discusión.
Aún no hay comentarios. Sé el primero en compartir tus ideas.