chrome-devtools-mcp  by benjaminr

AI-powered debugging bridge for web applications

Created 6 months ago
275 stars

Top 94.1% on SourcePulse

GitHubView on GitHub
1 Expert Loves This Project
Project Summary

This project provides an MCP (Model Context Protocol) server that bridges Chrome DevTools Protocol with Claude AI, enabling developers to debug web applications through conversational interaction. It targets users of Claude Desktop and Claude Code, offering a novel way to inspect network requests, console logs, performance, and JavaScript objects by querying an AI assistant. The primary benefit is a more intuitive, AI-driven debugging workflow integrated directly into the Claude environment.

How It Works

The core of the project is an MCP server that exposes Chrome DevTools Protocol functionalities. This server acts as an intermediary, translating natural language queries or commands from Claude into DevTools Protocol actions and relaying the results back. This approach allows for real-time debugging, inspection, and monitoring of web applications directly within the Claude interface, leveraging AI for analysis and interaction.

Quick Start & Requirements

  • Primary Install: The easiest method is installing the pre-built Claude Desktop Extension (.dxt file) via Claude Desktop's Extensions menu. Alternatively, use the MCP CLI (pip install mcp then mcp install server.py --with-editable .) or integrate with Claude Code using its CLI commands (requiring absolute paths).
  • Prerequisites: Python 3.10+ and the MCP SDK (pip install mcp) are required. uv is recommended for dependency management. A Chrome browser instance is necessary for debugging.
  • Links: Releases page for .dxt files (implied), GitHub repository: https://github.com/benjaminr/chrome-devtools-mcp.

Highlighted Details

  • Network Monitoring: Capture, analyze, and filter HTTP requests/responses.
  • Console Integration: Read logs, analyze errors, and execute JavaScript commands.
  • Performance Metrics: Gather timing data, resource loading information, and memory utilization.
  • Page Inspection: Inspect DOM structure, page metrics, and multi-frame content.
  • Storage Access: Read and manipulate cookies, localStorage, and sessionStorage.
  • Real-time Monitoring: Live tracking of console output and application state.

Maintenance & Community

The repository is benjaminr/chrome-devtools-mcp. No specific details regarding maintainers, community channels (like Discord/Slack), or sponsorship were found in the provided README.

Licensing & Compatibility

The project is released under the MIT License. While permissive for commercial use, the README includes security notes advising against connecting to production Chrome instances and stating the server is designed for localhost debugging only.

Limitations & Caveats

This tool is strictly intended for development and localhost debugging environments; use with production instances is explicitly discouraged. Full integration relies on using Claude Desktop or Claude Code. Advanced installations, particularly with Claude Code, require careful management of absolute file paths for correct operation.

Health Check
Last Commit

3 months ago

Responsiveness

Inactive

Pull Requests (30d)
1
Issues (30d)
0
Star History
20 stars in the last 30 days

Explore Similar Projects

Feedback? Help us improve.