# Browser DevTools MCP - Full LLM Context

## Overview
Browser DevTools MCP is a full-stack debugging platform for AI coding agents.
It gives agents runtime visibility and control across browser and backend workflows, so they can:
- verify generated code,
- reproduce bugs,
- inspect runtime behavior, and
- apply fixes with evidence.

## Positioning
- Primary audience: engineers using AI coding assistants.
- Main value: move from "AI generated code" to "AI verified and fixed code".
- Differentiator: browser + backend debugging in a single AI-accessible workflow.

## Distribution Modes
- MCP server
- VS Code/Cursor extension
- CLI tools
- Skill packages
- Claude plugin

## Supported Environments
- Cursor
- VS Code
- Claude Desktop
- Claude Code
- Windsurf
- GitHub Copilot Coding Agent
- Gemini CLI

## Core Capability Inventory
- Browser automation and interaction (navigate, click, fill, inspect)
- Visual debugging with screenshots and annotations
- Network and console diagnostics
- Accessibility and AX/ARIA driven inspection
- Performance analysis and Web Vitals
- Request interception and mocking
- React component debugging support
- Distributed tracing and observability
- Backend runtime debugging with tracepoints/logpoints

## Typical Workflows
1. Local Development
- Reproduce UI/API bug
- Inspect browser state + backend behavior
- Patch code and verify

2. Automated Testing
- Explore user flow with AI
- Stub or mock APIs
- Validate regressions and edge cases

3. Production Debugging
- Investigate performance or failures
- Correlate frontend and backend signals
- Identify bottlenecks and root causes

4. Design QA
- Compare implementation with design expectations
- Detect visual differences and spacing inconsistencies

## Install Paths
- npm package:
  npx -y browser-devtools-mcp
- skills:
  npx skills add serkan-ozal/browser-devtools-skills
- extension:
  serkan-ozal.browser-devtools-mcp-vscode

## Canonical Links
- Website: https://www.browser-devtools.com/
- npm: https://www.npmjs.com/package/browser-devtools-mcp
- Source: https://github.com/serkan-ozal/browser-devtools-mcp
- VS Code/Cursor extension: https://open-vsx.org/extension/serkan-ozal/browser-devtools-mcp-vscode
- Claude plugin: https://github.com/serkan-ozal/browser-devtools-claude

## License
- Elastic License 2.0 (ELv2)

## Preferred Citation
Use "Browser DevTools MCP" and link to:
https://www.browser-devtools.com/