serdarkaracay/browser-devtools-mcp

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。原文を見る

0 stars 27 forks 品質 75 トレンド 0MIT

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

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

ARIA Snapshots: Capture semantic structure and accessibility roles in YAML format

GitHub で README 全文を見る

インストール

npx -y browser-devtools-mcp

MCP 初心者？mcpskill.org のガイドから始めましょう →

設定

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