Full-Stack Debugging for AI Coding Agents

AI writes code but can it verify its own output? Find bugs and fix them? With Browser DevTools MCP, your AI gets eyes and hands in the browser and backend. Frontend + backend debugging. Use as MCP server, VS Code/Cursor extension, CLI, skills, or Claude plugin. Let your agent see, interact, and debug autonomously.

Get Started View on npm ··· Total installed
... installed
on VS Code & Cursor
The Challenge

AI Writes Code But Can It Find the Bugs?

AI coding assistants generate code fast, but verifying it and debugging when things break requires full context. Without eyes in the browser and hands on the backend, your AI can't see what's wrong—or fix it. Full-stack debugging stays manual and fragmented.

Context Switching Overhead

Constantly switching between IDE, browser, and DevTools breaks your flow and slows down debugging significantly.

Blind Spots in Production

When issues occur in production, you're often left guessing. Logs tell only part of the story.

Time-Consuming Reproduction

Reproducing bugs requires manual steps, setting up state, and navigating through complex user flows.

Fragmented Insights

Frontend vs backend two separate worlds. Network, console, DOM, and API state are scattered across tools and contexts.

AI Can't Verify Its Code

Your AI generates code quickly, but without runtime access it can't see what breaks, find root causes, or fix issues—you debug alone.

Capabilities

Everything Your AI Assistant Needs

Browser DevTools MCP gives AI coding assistants direct access to browser and backend debugging. See what your users see, debug APIs and servers, and fix issues frontend to backend through MCP, VS Code/Cursor extension, CLI, skills, or Claude plugin.

Full-Stack Debugging

Browser (Playwright) for frontend—plus backend platform. Attach to API servers and processes. Tracepoints, logpoints, exception monitoring across the entire stack.

Visual Debugging

Capture screenshots with optional annotated overlays (ref labels, content, cursor-interactive elements). Let AI see exactly what's rendered. Compare against Figma designs with AI-powered similarity scoring.

Full Browser Control

Navigate, click, fill forms, scroll, and interact with any element. Use CSS selectors or ARIA refs (e1, @e1) from snapshots for reliable targeting. Your AI can reproduce any user journey automatically.

Network & Console Inspection

Monitor HTTP requests, capture console logs and errors, and track network failures in real-time.

Performance Metrics

Measure Core Web Vitals (LCP, FID, CLS), identify performance bottlenecks, and optimize with data-driven insights.

Accessibility Auditing

ARIA and AX tree snapshots with refs for interaction. Bounding boxes, occlusion detection, interactive-only or cursor-interactive filters. Ensure your application works for everyone.

React DevTools Integration

Inspect React component trees, examine props and state, and understand your component hierarchy.

Request Mocking

Stub API responses, intercept network requests, and test edge cases without modifying your backend.

Distributed Tracing

OpenTelemetry integration for end-to-end request tracing. Follow requests from browser to backend and back.

Non-Blocking Debug Tools

Set tracepoints, logpoints, and exception handlers without pausing execution. Monitor DOM mutations and network requests with snapshot capture.

CLI Tools

browser-devtools-cli for frontend, node-devtools-cli for backend. Script automation, session-based debugging, and daemon architecture. Use standalone or via skills.

AI Agent Skills

Ready-to-Use Skills for AI Coding Agents

Install full-stack debugging capabilities as skills for AI coding agents like Claude Code, Cursor, and Windsurf. One command adds browser + backend debugging via the skills.sh ecosystem. Also available as VS Code/Cursor extension and Claude Plugin.

One command to install all skills:
npx skills add serkan-ozal/browser-devtools-skills

browser-testing

Browser automation, interaction, and form testing. Navigate pages, fill forms, test validation flows.

debugging

Full-stack: web and backend. Console, network, tracepoints, logpoints, and exception monitoring.

visual-testing

Annotated screenshots, responsive testing, and Figma design comparison for pixel-perfect implementations.

performance-audit

Web Vitals (LCP, INP, CLS) measurement and performance analysis with actionable recommendations.

accessibility-audit

WCAG compliance, ARIA snapshots with refs, AX tree with occlusion detection. Use refs for interaction tools.

api-testing

API mocking, request interception, and response stubbing for edge case testing.

react-debugging

React component inspection, props and state examination, and component hierarchy visualization.

observability

Distributed tracing with OpenTelemetry, trace ID management, and backend correlation.

The Vision

AI That Verifies and Fixes Its Own Code

AI coding assistants write code fast—but the real power comes when they can see it run, find bugs, and fix them. Browser DevTools MCP gives your AI eyes in the browser and hands on the backend. Full-stack debugging: frontend to backend, in one flow.

We believe the future of development is AI that doesn't just generate code—it verifies it, debugs it, and iterates. No more blind spots between "AI wrote it" and "it works." MCP server, VS Code/Cursor extension, CLI, skills, or Claude plugin—choose how your AI debugs.

  • Deep application debugging with intelligent insights and context
  • Autonomous debugging agents that investigate issues proactively
  • Production monitoring with AI-powered incident analysis
  • Full-stack debugging: browser + backend—MCP, VS Code/Cursor extension, CLI, skills, Claude plugin
Use Cases

From Development to Production

Whether you're building a new feature, debugging a tricky issue, or monitoring production, Browser DevTools MCP adapts to your workflow.

Accelerate Local Development

Let your AI assistant see your running application, interact with UI elements, and debug issues in real-time. No more copy-pasting error messages or describing what you see—your AI has full visual and interactive context.

> Navigate to localhost:3000, click the login button, and tell me why the form validation isn't working

AI-Assisted Test Automation

Generate comprehensive test scenarios by letting AI explore your application. Capture visual snapshots, verify functionality, and catch regressions before they reach users.

> Test the checkout flow end-to-end, mock the payment API to return an error, and verify the error handling works correctly

Debug Production Issues Fast

Connect to your production environment and let AI investigate issues with the same tools you use locally. Capture state, analyze network requests, and identify root causes without the guesswork.

> Users report the dashboard is slow. Check the production site, measure Web Vitals, analyze network requests, and identify the bottleneck

Pixel-Perfect Implementation

Compare your implementation against Figma designs with AI-powered visual analysis. Identify discrepancies, measure spacing, and ensure your UI matches design specifications.

> Compare the hero section with the Figma design and list all visual differences. Focus on spacing, colors, and typography
Get Started

Add to Your AI Assistant in Seconds

MCP server, VS Code/Cursor extension (one-click install, no config), Claude Plugin (skills + commands + agents), or manual config. Full-stack debugging for Cursor, Claude, VS Code, Windsurf, Copilot, and Gemini.

Cursor Cursor

~/.cursor/mcp.json
{
  "mcpServers": {
    "browser-devtools": {
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp"]
    }
  }
}

📖 Cursor MCP Documentation

VS Code VS Code

.vscode/mcp.json
{
  "mcp": {
    "servers": {
      "browser-devtools": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "browser-devtools-mcp"]
      }
    }
  }
}

📖 VS Code MCP Documentation

Open VSX VS Code / Cursor Extension

One-click install—no manual MCP config. The extension bundles the MCP server and runs it automatically. Full-stack debugging (browser + backend) in Cursor or VS Code with Copilot.

Option 1: From Extension Marketplace
Search in Extensions (Ctrl+Shift+X / Cmd+Shift+X)
🔍 Browser DevTools MCP
Option 2: Command Line
Run in terminal
# VS Code
code --install-extension serkan-ozal.browser-devtools-mcp-vscode

# Cursor
cursor --install-extension serkan-ozal.browser-devtools-mcp-vscode

📖 View on Open VSX Registry

Claude Claude Plugin (Claude Code)

Recommended for Claude Code users. Adds skills, slash commands (/browse, /screenshot, /webvitals, etc.), and agents (accessibility-auditor, design-qa, performance-analyzer). Full-stack debugging: browser + backend.

In Claude Code, run:
# Add marketplace
/plugin marketplace add serkan-ozal/browser-devtools-claude

# Install
/plugin install browser-devtools-mcp@serkan-ozal/browser-devtools-claude

📖 Claude Plugin Repository

Claude Claude Desktop

claude_desktop_config.json
{
  "mcpServers": {
    "browser-devtools": {
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp"]
    }
  }
}

📖 Claude Desktop MCP Documentation

Claude Claude Code

Run in terminal
claude mcp add browser-devtools -- npx -y browser-devtools-mcp

📖 Claude Code MCP Documentation

Windsurf Windsurf

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "browser-devtools": {
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp"]
    }
  }
}

📖 Windsurf MCP Documentation

Copilot Copilot Coding Agent

Repository Settings → Copilot → Coding agent → MCP configuration
{
  "mcpServers": {
    "browser-devtools": {
      "type": "local",
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp"]
    }
  }
}

📖 Copilot Coding Agent MCP Documentation

Gemini Gemini CLI

~/.gemini/settings.json
{
  "mcpServers": {
    "browser-devtools": {
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp"]
    }
  }
}

📖 Gemini CLI MCP Documentation

Ready for Full-Stack AI Debugging?

Give your AI eyes in the browser and hands on the backend. MCP, VS Code/Cursor extension, CLI, skills, or Claude plugin—start verifying and fixing code with AI.

Get Started Now View on npm