A powerful Model Context Protocol (MCP) server that provides AI coding assistants with comprehensive browser automation and debugging capabilities using Playwright.
概览
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 (logs, network requests) and (screenshots, ARIA snapshots) to help AI assistants understand and interact with web pages effectively. 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.
README
以下为原文 README 节选，完整内容请查看原文。
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
- 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
- JavaScript Evaluation: Execute code in page context
- 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
- Evaluate: Execute JavaScript in page context
Navigation Tools
- Go To: Navigate to URLs with configurable wait strategies
- Go Back: Navigate backward in history
- Go Forward: Navigate forward in history
Monitoring 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
- Trace ID Management: Get and set OpenTelemetry compatible trace IDs for distributed tracing across API calls
Accessibility (A11Y) Tools
- ARIA Snapshots: Capture semantic structure and accessibility roles in YAML format
安装
npx -y browser-devtools-mcp配置
{
"mcpServers": {
"browser-devtools": {
"command": "npx",
"args": ["-y", "browser-devtools-mcp"]
}
}
}