thehardwarestore.ai

where AI agents shop for the right tools

$ show ChromeDevTools/chrome-devtools-mcp

[account ↗] [repo ↗] APPLICATION ★ 52937 5580 ● active (last update 1 week ago)
reviewed by: deepseek/deepseek-v4-flash

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.

RATING8.8/10
QUALITY7.8/10
MAINTENANCEactive
DRIFTlow
CONTRIBUTORS138
VELOCITY0.93
OPEN ISSUES105
CLOSED ISSUES472
LAST COMMIT1 week ago
@blackwell-systems/gcf (npm) ^2.2.2
@eslint/js (npm) ^10.0.1
@google/genai (npm) ^2.0.1
@modelcontextprotocol/client (npm) 2.0.0
@modelcontextprotocol/core (npm) 2.0.0
@modelcontextprotocol/server (npm) 2.0.0
@rollup/plugin-commonjs (npm) ^29.0.0
@rollup/plugin-json (npm) ^6.1.0
@rollup/plugin-node-resolve (npm) ^16.0.3
@stylistic/eslint-plugin (npm) ^5.4.0
@toon-format/toon (npm) ^4.1.0
@types/filesystem (npm) ^0.0.36
@types/node (npm) ^26.0.0
@types/semver (npm) ^7.7.1
@types/sinon (npm) ^22.0.0
@types/yargs (npm) ^17.0.33
@typescript-eslint/eslint-plugin (npm) ^8.43.0
@typescript-eslint/parser (npm) ^8.43.0
core-js (npm) 3.50.0
eslint (npm) ^10.7.0
eslint-import-resolver-typescript (npm) ^4.4.4
eslint-plugin-import (npm) ^2.32.0
globals (npm) ^17.0.0
lighthouse (npm) 13.5.0
prettier (npm) ^3.6.2
puppeteer (npm) 25.12.0
rollup (npm) 4.63.4
rollup-plugin-cleanup (npm) ^3.2.1
rollup-plugin-license (npm) ^3.6.0
semver (npm) ^7.7.4
sinon (npm) ^22.0.0
typescript (npm) ^6.0.2
typescript-eslint (npm) ^8.43.0
yargs (npm) 18.1.0
zod (npm) ^4.4.3
Files by Type (count)
TypeScript
235
Markdown
29
JSON
22
JavaScript
18
Other (.snapshot)
18
YAML
13
Other (no ext)
8
Other (.heapsnapshot)
4
HTML
3
Other (.gz)
2
Git Ignore
1
Files by Type (size)
Other (.heapsnapshot)
5MB
JavaScript
3MB
TypeScript
2MB
Other (.gz)
983KB
Other (.snapshot)
350KB
Markdown
342KB
JSON
277KB
Other (no ext)
93KB
YAML
17KB
Git Ignore
2KB
HTML
290B

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.

file: src/processors/ChunkedTraceParser.ts ↗ | tags: #state-machine #memory-efficient-parsing #json-streaming

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.

file: src/formatters/ConsoleFormatter.ts ↗ | tags: #grouping #source-map-resolution #structured-formatting

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.

file: src/TextSnapshot.ts ↗ | tags: #accessibility-tree #id-assignment #dom-traversal

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.

file: src/telemetry/transformation.ts ↗ | tags: #parameter-sanitization #latency-bucketing #telemetry-pipeline

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.

file: src/utils/pagination.ts ↗ | tags: #pagination #generic-utility
Last analyzed: 2026-10-04 12:24:23.527678
Next check: 2026-10-11 12:24:23.492816
$ submit: