MCPを通じてChrome DevTools Protocolと連携するModel Context Protocol(MCP)サーバーです。これにより、Chromeの開発者ツールに接続することでウェブアプリケーションのデバッグが可能になります。

**Claudeデスクトップ拡張機能(.dxt)**で利用可能で、ワンクリックで簡単にインストールできます!

これが何をするのか

このMCPサーバーはClaudeとChromeのデバッグ機能の間の橋渡し役を果たします。Claude Desktopにインストールすると、以下が可能です:

• ClaudeをChromeで動作する任意のウェブアプリケーションに接続
• ネットワークリクエスト、コンソールエラー、パフォーマンス問題のデバッグ
• ブラウザの文脈でJavaScriptオブジェクトを検査し、コードを実行
• Claudeとの自然な会話を通じて、アプリケーションをリアルタイムで監視

注意:これはClaude Desktop内で動作するMCPサーバーで、別々のサーバーやプロセスを実行する必要はありません。

特徴

• ネットワーク監視:フィルタリングオプションでHTTPリクエスト/レスポンスをキャプチャ・解析
• コンソール統合:ブラウザコンソールログの読み取り、エラーの解析、JavaScriptの実行
• パフォーマンス指標:タイミングデータ、リソースロード、メモリ利用
• ページ検査: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