Devtools Mcp
What is Devtools Mcp
devtools-mcp is a MCP server that provides access to the Chrome DevTools Protocol (CDP) for interacting with Large Language Models (LLMs).
Use cases
Use cases include automating browser tasks, capturing screenshots, running performance tests, and evaluating JavaScript code in a web context.
How to use
To use devtools-mcp, start Chrome with remote debugging enabled, install the necessary dependencies using npm, and add it as a local MCP server. You can then execute CDP commands through the cdp_command tool.
Key features
Key features include the ability to execute any CDP command, automatic handling of binary data, and saving large responses like screenshots and PDFs to files.
Where to use
devtools-mcp can be used in web development, automated testing, and any application that requires interaction with web pages through the Chrome DevTools Protocol.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Devtools Mcp
devtools-mcp is a MCP server that provides access to the Chrome DevTools Protocol (CDP) for interacting with Large Language Models (LLMs).
Use cases
Use cases include automating browser tasks, capturing screenshots, running performance tests, and evaluating JavaScript code in a web context.
How to use
To use devtools-mcp, start Chrome with remote debugging enabled, install the necessary dependencies using npm, and add it as a local MCP server. You can then execute CDP commands through the cdp_command tool.
Key features
Key features include the ability to execute any CDP command, automatic handling of binary data, and saving large responses like screenshots and PDFs to files.
Where to use
devtools-mcp can be used in web development, automated testing, and any application that requires interaction with web pages through the Chrome DevTools Protocol.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
devtools-mcp
A MCP server that provides Chrome DevTools Protocol access to LLMs.
- Execute any CDP command through the
cdp_commandtool - Automatic binary data handling - large responses (screenshots, PDFs) are saved to files
Setup
- Start Chrome with remote debugging:
/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
- Install dependencies:
npm install
- Add as local MCP server. E.g. with Claude Code:
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.
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
