chrome-devtools-mcp

🥈Silver

Chrome DevTools MCP server enables debugging web applications via the Chrome DevTools Protocol. Integrates with Claude Desktop and Claude Code for streamlined debugging workflows. Ideal for operations teams managing web applications.

278440Updated 1w ago

Intermediate30min to implementautomation

Saves ~120 min per use

Quick InstallView Source

git clone https://github.com/benjaminr/chrome-devtools-mcp.git

Works with:

Claude

Overview

About This Skill

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/benjaminr/chrome-devtools-mcp

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

I want to use the Chrome DevTools Protocol to automate browser testing for [COMPANY]. I need to set up an MCP server that can communicate with Chrome DevTools. Can you guide me through the process of integrating this with [TOOL] and provide a sample script to start with?

Example Output

## Setting Up Chrome DevTools Protocol with MCP Server

### Prerequisites
- Chrome or Chromium browser
- Node.js installed
- Basic understanding of JavaScript

### Step 1: Install Required Packages
```bash
npm install chrome-remote-interface mcp-server
```

### Step 2: Create a Basic Server
```javascript
const { ChromeRemoteInterface } = require('chrome-remote-interface');
const MCPServer = require('mcp-server');

async function startServer() {
  const client = await ChromeRemoteInterface();
  const { DOM, Runtime, Network } = client;

  const server = new MCPServer();
  server.on('message', (message) => {
    console.log('Received message:', message);
  });  

  server.start();
  console.log('MCP Server started');
}

startServer().catch(console.error);
```

### Step 3: Integrate with [TOOL]
To integrate with [TOOL], you need to ensure that the MCP server is running and accessible. You can then use the [TOOL] API to send commands to the MCP server.

### Step 4: Test the Integration
You can test the integration by sending a simple command to the MCP server and verifying that it responds correctly.

## Conclusion
This setup allows you to automate browser testing using the Chrome DevTools Protocol and MCP server. You can extend this basic setup to include more complex automation tasks.