Browser Devtools MCP

Name: Browser Devtools MCP
Author: serkan-ozal

@serkan-ozal

关于 Browser Devtools MCP

A Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.

#browser #ai #mcp #tracing #debug #ai-agents #opentelemetry #playwright

基本信息

分类

浏览器自动化

传输方式

stdio

发布者

serkan-ozal

提交者

Serkan Özal

配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

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

工具

未检测到工具

工具是从 README 中自动提取的。维护者可以在 ## Tools 标题下列出工具,即可填充这部分内容。

概览

What is Browser Devtools MCP?

Browser Devtools MCP is a Model Context Protocol server that provides AI coding assistants with browser automation and debugging capabilities using Playwright, supporting both execution-level debugging (logs, network requests) and visual debugging (screenshots, ARIA snapshots).

How to use Browser Devtools MCP?

Run the server directly with npx -y browser-devtools-mcp without manual installation. Configure your MCP client (VS Code, Claude, Cursor, etc.) with the command npx -y browser-devtools-mcp. Supports both stdio and streamable-http transports, configurable via CLI arguments --transport and --port.

Key features of Browser Devtools MCP

Visual inspection via screenshots, ARIA snapshots, HTML extraction
DOM and code-level debugging with element inspection
Browser automation: navigation, clicking, form filling, scrolling
Execution monitoring with console messages and HTTP request tracking
Figma design comparison with similarity scoring
OpenTelemetry integration for distributed tracing

Use cases of Browser Devtools MCP

AI-assisted debugging of web application issues
Automated testing with browser interaction and screenshot validation
Accessibility auditing using ARIA and AX tree snapshots
Performance monitoring with web vitals and network tracking
Visual comparison of live pages against Figma designs

FAQ from Browser Devtools MCP

What are the prerequisites for using Browser Devtools MCP?

You need Node.js 18+ and an AI assistant with an MCP client (e.g., Cursor, Claude Desktop/Code, VS Code, Windsurf).

How do I install Browser Devtools MCP?

No manual installation is required. Run npx -y browser-devtools-mcp to automatically download and start the server.

What transport modes does Browser Devtools MCP support?

It supports both stdio (default) and streamable-http transports, configurable via --transport CLI argument.

How can I use the React tools?

React tools work best with persistent browser context enabled (BROWSER_PERSISTENT_ENABLE=true). Manually install the "React Developer Tools" Chrome extension for optimal reliability; without it, tools fall back to less reliable DOM scanning.

Can I run Browser Devtools MCP as a remote server?

Yes, start it with --transport=streamable-http --port=3000 and configure your MCP client to connect to the server URL (e.g., http://localhost:3000/mcp).