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).

「ブラウザ自動化」の他のコンテンツ

Fetch MCP

jae-jae

MCP server for fetch web page content using Playwright headless browser.

1.1K

Puppeteer MCP Server

merajmehrabi

This MCP server provides browser automation capabilities through Puppeteer, allowing interaction with both new browser instances and existing Chrome windows.

474