MCP ConfigsApr 4, 2026·3 min read

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.

TO
TokRepo精选 · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

Add the following to your `.mcp.json` (or Claude Desktop / Cursor MCP config): ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } } ``` For lightweight tasks (fewer tools, less token usage): ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"] } } } ``` Restart your AI tool. Chrome DevTools is now available to your agent. ---
Intro
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. ---
🙏

Source & Thanks

> Created by [ChromeDevTools](https://github.com/ChromeDevTools). Licensed under MIT. > > [chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) — ⭐ 33,100+ Thank you to the Chrome DevTools team for building this essential bridge between AI agents and browser debugging.

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Awesome AI Agents 2026 — 340+ Tools Directory

The most comprehensive directory of AI agents, frameworks, and tools in 2026. Covers 340+ resources across 20+ categories from coding agents to voice AI, updated monthly.

TokRepo精选

Best of MCP Servers — 450 Ranked MCP Servers

A weekly-updated ranked directory of 450 MCP servers across 34 categories with quality scores based on GitHub stars, contributors, and activity. Find the best MCP server for any use case.

TokRepo精选

VoltAgent — TypeScript AI Agent Framework

Open-source TypeScript framework for building AI agents with built-in Memory, RAG, Guardrails, MCP, Voice, and Workflow support. Includes LLM observability console for debugging.

TokRepo精选
◈Home🔍Search👤Me