trackmcp
Back to directory
stefanli

devtools-mcp

View on GitHub

A MCP server that provides Chrome DevTools Protocol access to LLMs

24 stars TypeScriptDeveloper Kits Updated Nov 3, 2025

Documentation

devtools-mcp

A MCP server that provides Chrome DevTools Protocol access to LLMs.

  • Execute any CDP command through the `cdp_command` tool
  • Automatic binary data handling - large responses (screenshots, PDFs) are saved to files

Setup

1. Start Chrome with remote debugging:

bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --remote-debugging-address=127.0.0.1 \
  --user-data-dir=/tmp/chrome-debug \
  --no-first-run \
  --disable-default-apps

2. Install dependencies:

bash
npm install

3. Add as local MCP server. E.g. with Claude Code:

bash
claude mcp add devtools-server -- npx tsx ~/projects/devtools-mcp/src/index.ts

Usage

The server exposes a single `cdp_command` tool that accepts:

  • `method`: Any CDP command (e.g., "Page.navigate", "Runtime.evaluate")
  • `params`: JSON string of command parameters (optional)

Binary data (screenshots, etc.) is automatically saved to `./cdp-output/` with file path references returned instead of raw data.

Frequently asked questions

What is devtools-mcp?

devtools-mcp is A MCP server that provides Chrome DevTools Protocol access to LLMs

How do I install devtools-mcp?

Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.

Is devtools-mcp open source?

Yes — it is hosted on GitHub at https://github.com/stefanli/devtools-mcp and has 24 stars.

Related MCP tools

Run your own MCP server? See who uses it and what to fix.

Measure it with TrackMCP