$ show ChromeDevTools/chrome-devtools-mcp
This repository implements an MCP (Model Context Protocol) server that exposes Chrome DevTools capabilities as tools for AI coding assistants. In production, it launches a headless or headed Chrome browser via Puppeteer, connects to the DevTools frontend SDK, and provides over 50 tools covering navigation, input automation, network inspection, performance tracing, heap snapshot analysis, CSS inspection, accessibility auditing (via Lighthouse), PWA management, and extension debugging. The architecture is a Node.js server that runs either as a long-lived daemon (Unix socket IPC) or as a CLI tool, with a configuration pipeline supporting CLI flags, config files, and environment variables. Key entry points are `src/bin/chrome-devtools-mcp.ts` (MCP server) and `src/bin/chrome-devtools.ts` (standalone CLI). Data flows involve collecting console messages, network requests, and DevTools issues per page via `PageCollector`, processing performance traces via `ChunkedTraceParser` and `PerformanceTrace`, and formatting results through specialized formatters (`ConsoleFormatter`, `CssFormatter`, `HeapSnapshotFormatter`, etc.) that support both text and structured JSON output. External dependencies include Puppeteer for browser control, the DevTools frontend SDK for advanced features (heap snapshots, stack traces), Lighthouse for audits, and a telemetry system (Clearcut) for usage statistics.
The LLM identified 5 files worth highlighting for reuse:
A state machine that parses large Chrome performance trace files (JSON) in chunks to avoid V8 string length limits. It scans raw bytes for JSON boundaries, batches events, and handles edge cases like multibyte UTF-8, escaped strings, and nested delimiters. This is a non-obvious, reusable pattern for processing large JSON arrays in memory-constrained environments.
Formats console messages with source-mapped stack traces, groups consecutive identical messages (like DevTools console), and supports both text and JSON output. The grouping logic and stack trace resolution are non-trivial and could be extracted for any console-logging system.
Creates an accessibility tree snapshot from CDP data, assigns stable IDs to nodes, and injects extra nodes (e.g., for elements not in the accessibility tree) by finding the nearest ancestor. This is a self-contained pattern for building structured accessibility representations from raw browser data.
Sanitizes tool call parameters for telemetry (removing sensitive data like URLs, file paths, and large strings), bucketizes latency values, and builds context objects. This is a reusable pattern for any telemetry system that needs to log structured, privacy-safe usage data.
A simple but consistently used pagination utility that slices arrays and returns a page with metadata (total, page index, page size). Used across network requests, console messages, heap snapshot data, and CSS rules. Demonstrates a clean, reusable pattern for paginating any list data.