browser-devtools-mcp

Browser DevTools MCP

A powerful Model Context Protocol (MCP) server that provides AI coding assistants with comprehensive browser automation and debugging capabilities using Playwright. This server enables both execution-level debugging (logs, network requests) and visual debugging (screenshots, ARIA snapshots) to help AI assistants understand and interact with web pages effectively.

Overview

Browser DevTools MCP exposes a Playwright-powered browser runtime to AI agents, enabling deep, bidirectional debugging and interaction with live web pages. It supports both visual understanding and code-level inspection of browser state, making it ideal for AI-driven exploration, diagnosis, and automation.

Key Capabilities

• Visual Inspection: Screenshots, ARIA snapshots, HTML/text extraction, PDF generation
• Design Comparison: Compare live page UI against Figma designs with similarity scoring
• DOM & Code-Level Debugging: Element inspection, computed styles, accessibility data
• Browser Automation: Navigation, input, clicking, scrolling, viewport control
• Execution Monitoring: Console message capture, HTTP request/response tracking
• OpenTelemetry Integration: Automatic trace injection into web pages, UI trace collection, and backend trace correlation via trace context propagation
• JavaScript Execution: Execute code in browser page context or in Node.js VM sandbox on the server
• Session Management: Long-lived, session-based debugging with automatic cleanup
• Multiple Transport Modes: Supports both stdio and HTTP transports

Features

Content Tools

• Screenshots: Capture full page or specific elements (PNG/JPEG) with image data
• HTML/Text Extraction: Get page content with filtering, cleaning, and minification options
• PDF Export: Save pages as PDF documents with customizable format and margins

Interaction Tools

• Click: Click elements by CSS selector
• Fill: Fill form inputs
• Hover: Hover over elements
• Press Key: Simulate keyboard input
• Select: Select dropdown options
• Drag: Drag and drop operations
• Scroll: Scroll the page viewport or specific scrollable elements with multiple modes (by, to, top, bottom, left, right)
• Resize Viewport: Resize the page viewport using Playwright viewport emulation
• Resize Window: Resize the real browser window (OS-level) using Chrome DevTools Protocol

Navigation Tools

• Go To: Navigate to URLs with configurable wait strategies
• Go Back: Navigate backward in history
• Go Forward: Navigate forward in history

Run Tools

• JS in Browser: Execute JavaScript code inside the active browser page (page context with access to window, document, DOM, and Web APIs)
• JS in Sandbox: Execute JavaScript code in a Node.js VM sandbox on the MCP server (with access to Playwright Page, console logging, and safe built-ins)

Observability (O11Y) Tools

• Console Messages: Capture and filter browser console logs with advanced filtering (level, search, timestamp, sequence number)
• HTTP Requests: Monitor network traffic with detailed request/response data, filtering by resource type, status code, and more
• Web Vitals: Collect Core Web Vitals (LCP, INP, CLS) and supporting metrics (TTFB, FCP) with ratings and recommendations based on Google's thresholds
• OpenTelemetry Tracing: Automatic trace injection into web pages, UI trace collection (document load, fetch, XMLHttpRequest, user interactions), and trace context propagation for backend correlation
• Trace ID Management: Get, set, and generate OpenTelemetry compatible trace IDs for distributed tracing across API calls

Synchronization Tools

• Wait for Network Idle: Wait until the page reaches a network-idle condition based on in-flight request count, useful for SPA pages and before taking screenshots

Accessibility (A11Y) Tools

• ARIA Snapshots: Capture semantic structure and accessibility roles in YAML format
• AX Tree Snapshots: Combine Chromium's Accessibility tree with runtime visual diagnostics (bounding boxes, visibility, occlusion detection, computed styles)