Сервер Model Context Protocol (MCP), обеспечивающий интеграцию Chrome DevTools Protocol через MCP. Это позволяет отладить веб-приложения, подключаясь к инструментам разработчиков Chrome.

Доступно в виде расширения Claude Desktop Extension (.dxt) для удобной установки в один клик!

Что это делает

Этот MCP-сервер служит мостом между возможностями отладки Claude и Chrome. После установки в Claude Desktop вы можете:

• Подключить Claude к любому веб-приложению, работающему в Chrome
• Отладочные сетевые запросы, ошибки консоли и проблемы с производительностью
• Проверять объекты JavaScript и выполнять код в контексте браузера
• Мониторинг вашего приложения в реальном времени через естественный диалог с Клодом

Примечание: Это MCP-сервер, который работает внутри Claude Desktop — вам не нужно запускать отдельные серверы или процессы.

Особенности

• Мониторинг сети: Захват и анализ HTTP-запросов/ответов с опциями фильтрации
• Интеграция с консолью: Чтение консольных логов браузера, анализ ошибок и выполнение JavaScript
• Метрики производительности: данные по таймингу, загрузка ресурсов и использование памяти
• Page Inspection: информация о DOM, метрики страницы и поддержка мультикадров

Chrome DevTools MCP

A Model Context Protocol (MCP) server that provides Chrome DevTools Protocol integration through MCP. This allows you to debug web applications by connecting to Chrome’s developer tools.

Available as a Claude Desktop Extension (.dxt) for easy one-click installation!

What This Does

This MCP server acts as a bridge between Claude and Chrome’s debugging capabilities. Once installed in Claude Desktop, you can:

• Connect Claude to any web application running in Chrome
• Debug network requests, console errors, and performance issues
• Inspect JavaScript objects and execute code in the browser context
• Monitor your application in real-time through natural conversation with Claude

Note: This is an MCP server that runs within Claude Desktop - you don’t need to run any separate servers or processes.

Features

• Network Monitoring: Capture and analyse HTTP requests/responses with filtering options
• Console Integration: Read browser console logs, analyse errors, and execute JavaScript
• Performance Metrics: Timing data, resource loading, and memory utilisation
• Page Inspection: DOM information, page metrics, and multi-frame support
• Storage Access: Read cookies, localStorage, and sessionStorage
• Real-time Monitoring: Live console output tracking
• Object Inspection: Inspect JavaScript objects and variables

Installation

Option 1: Claude Desktop Extension (Easiest)

Download the pre-built extension:

1. Download the latest .dxt file from Releases
2. Open Claude Desktop
3. Go to Extensions and install the downloaded .dxt file
4. Configure Chrome path if needed in extension settings

The extension includes all dependencies and is ready to use immediately!

Option 2: MCP CLI (Advanced)

Quick Install (most common):

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

Note: The mcp command is part of the Python MCP SDK. Install it with pip install mcp if not already available.

All Installation Options:

# Clone the repository
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

# The --with-editable flag uses pyproject.toml to install dependencies

# Basic installation with local dependencies
mcp install server.py --with-editable .

# Install with custom name
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

# Install with environment variables
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -v CHROME_DEBUG_PORT=9222

# Install with additional packages if needed
mcp install server.py -n "Chrome DevTools MCP" --with-editable . --with websockets --with aiohttp

# Install with environment file (copy .env.example to .env first)
cp .env.example .env