MCP를 통해 Chrome DevTools 프로토콜 통합을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이를 통해 Chrome 개발자 도구에 연결하여 웹 애플리케이션을 디버깅할 수 있습니다.

**Claude 데스크톱 확장 프로그램(.dxt)**으로 제공되어 한 번에 클릭 설치가 가능합니다!

이것이 하는 일은

이 MCP 서버는 Claude와 Chrome의 디버깅 기능 사이의 다리 역할을 합니다. Claude Desktop에 설치하면 다음과 같은 기능이 있습니다:

• 클로드를 크롬에서 실행 중인 웹 애플리케이션에 연결할 수 있습니다
• 네트워크 요청, 콘솔 오류 및 성능 문제 디버그
• 자바스크립트 객체를 검사하고 브라우저 환경에서 코드를 실행합니다
• Claude와의 자연스러운 대화를 통해 애플리케이션을 실시간으로 모니터링할 수 있습니다

참고: 이 서버는 Claude Desktop 내에서 실행되는 MCP 서버로, 별도의 서버나 프로세스를 실행할 필요가 없습니다.

특징

• 네트워크 모니터링: 필터링 옵션을 포함한 HTTP 요청/응답을 캡처하고 분석합니다
• 콘솔 통합: 브라우저 콘솔 로그를 읽고, 오류를 분석하며, 자바스크립트를 실행합니다.
• 성능 지표: 타이밍 데이터, 자원 로딩, 메모리 활용
• 페이지 검사: 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