VS Code & Cursor…
NPM Downloads…
Full-Stack DebuggingBrowser + backend tools in one flow
Distributed TracingOpenTelemetry

Full-Stack Debugging for AI Coding Agents

AI writes code, but can it verify and fix what breaks? Browser DevTools MCP gives your agent eyes in the browser and hands on the backend.

Get StartedBenchmark
npmGitHubOpen VSX
CursorClaudeVS CodeGitHub CopilotWindsurfGemini CLI

AI That Verifies and Fixes Its Own Code

Give your AI runtime visibility in browser and backend, then let it verify and fix code with confidence.

AI Writes Code But Can It Find the Bugs?

Without browser and backend runtime context, AI-generated code still leaves debugging work on your shoulders.

Browser DevTools MCP
Context SwitchingBlind SpotsFragmented InsightsSlow ReproductionAI Can't Debug

Ready-to-Use Skills for AI Coding Agents

Install full-stack debugging skills for Claude Code, Cursor, and Windsurf with a single command.

$npx skills add serkan-ozal/browser-devtools-skills
browser-testingdebuggingvisual-testingperformance-auditaccessibility-auditapi-testingreact-debuggingobservability
Token reduction
78% less tokens

Watch debugging loops collapse when console, DOM, and network evidence arrive together.

Time savings
57% faster per run

Browser DevTools MCP cuts runtime cost by removing the need for repeated full-page interactions.

From Development to Production

Use one toolchain from feature development to production incidents.

Accelerate Local Development

Let your AI assistant see your running app, interact with UI elements, and debug issues in real-time. No manual reproduction steps.

AI Agent Prompt

Navigate to localhost:3000, click the login button, and tell me why the form validation is not working.

Benchmark

Real Run Comparison That Actually Matters

Same workflow, same scenario, radically different runtime cost profile.

Tokens78% Less
330,408vs1,501,929
Cost66% Less
$0.27vs$0.78
Time57% Faster
2m 44svs6m 19s
Browser DevTools MCPPlaywright MCP
Tokens
Cost (USD)
Time
Turns
Capabilities

Everything Your AI Assistant Needs

Browser DevTools MCP gives AI coding assistants direct browser and backend debugging access in one workflow.

Full-Stack Debugging

Browser + backend tools in one flow with tracepoints, logpoints, and exception monitoring.

Visual Debugging

Annotated screenshots and design checks help AI reason from what is actually rendered.

Full Browser Control

Navigate, click, fill, and interact with robust targeting strategies.

Network & Console Inspection

Capture requests, logs, and failures in real time.

Performance Metrics

Measure Web Vitals and identify bottlenecks with actionable signals.

Accessibility Auditing

ARIA/AX snapshots and interaction-aware checks for inclusive experiences.

React DevTools Integration

Inspect component trees, props, and state during debugging.

Request Mocking

Stub APIs and simulate edge cases without backend changes.

Distributed Tracing

Follow requests end-to-end with OpenTelemetry correlation.

Non-Blocking Debug Tools

Observe behavior with tracepoints and logpoints without pausing execution.

CLI Tools

Automate workflows with browser and node devtools CLIs.

Full-Stack Debugging

Browser + backend tools in one flow with tracepoints, logpoints, and exception monitoring.

Visual Debugging

Annotated screenshots and design checks help AI reason from what is actually rendered.

Full Browser Control

Navigate, click, fill, and interact with robust targeting strategies.

The Vision

AI That Verifies and Fixes Its Own Code

The next step for AI coding is not just generating code. It is observing runtime behavior, diagnosing issues, and resolving them end-to-end.

  1. 01Deep debugging with context from browser and backend.
  2. 02Autonomous investigation workflows for hard-to-reproduce issues.
  3. 03Production monitoring with actionable AI insight.
  4. 04MCP server, extension, CLI, skills, and plugin options.
Key Facts

Fast Facts for Search Engines and AI Assistants

Structured product facts to make indexing, citation, and summarization more accurate.

  1. 01Browser and backend debugging in one workflow.
  2. 02MCP server, VS Code/Cursor extension, CLI tools, skills, and Claude plugin support.
  3. 03Supports Cursor, VS Code, Claude Desktop, Claude Code, Windsurf, Copilot Coding Agent, and Gemini CLI.
  4. 04Includes visual debugging, network inspection, accessibility audits, and Web Vitals analysis.
  5. 05Free to use under Elastic License 2.0 for personal and commercial usage.
Get Started

Add to your AI assistant in seconds

MCP server, extension, plugin, or direct CLI setup. Choose your preferred entry point.

Cursor

~/.cursor/mcp.json

Direct MCP server setup for Cursor when you want explicit local configuration.

{
  "mcpServers": {
    "browser-devtools": {
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp"]
    }
  }
}
Cursor MCP Documentationnpm packageextensionsource
FAQ

Frequently Asked Questions

Direct answers for users, crawlers, and AI agents evaluating Browser DevTools MCP.

Browser DevTools MCP is a full-stack debugging product for AI coding agents. It exposes browser, network, console, performance, React, and backend debugging signals through MCP.

It works with Cursor, VS Code, Claude Code, Claude Desktop, Windsurf, GitHub Copilot Coding Agent, and Gemini CLI.

No. The same workflow helps with local development, automated verification, QA, and production issue investigation where runtime evidence matters.

You can use `npx -y browser-devtools-mcp`, configure it as an MCP server in your editor or assistant, or install the VS Code/Cursor extension from Open VSX.