Chrome DevTools MCP

Overview πŸ”­

Chrome DevTools MCP is a Model Context Protocol server that allows AI agents to interact with Chrome DevTools. It enables agents to inspect, debug, and modify data in the browser.

Installation πŸ“¦

Get started quickly by running the server using npx:

npx -y chrome-devtools-mcp@latest

Core Concepts 🧠

Understand how the server manages user profiles and connects to Chrome instances.

  • User Data Directory: Uses a separate profile by default to avoid conflicts.
  • Remote Debugging: Connects via WebSocket to control the browser.

Key Features ✨

Performance Insights: Record traces and extract actionable insights.

Browser Debugging: Analyze network requests, screenshots, and console logs.

Reliable Automation: Use Puppeteer to automate actions and wait for results.

Available Tools πŸ› οΈ

The server provides tools for Input Automation (click, type, hover), Navigation (open, close, switch tabs), Emulation (viewport resizing), and Performance Analysis.

Configuration βš™οΈ

The server supports various configurations, including connecting to an existing Chrome instance via WebSocket or launching a new instance with custom flags and user data directories.

Resources πŸ“š

Explore the official repository for comprehensive documentation, issue tracking, and contribution guidelines to help improve the tool.