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.

294440Updated Yesterday

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

How to Use

1. Install Chrome DevTools MCP in Claude Desktop via the MCP tab (search for 'Chrome DevTools'). 2. Open your target website in Chrome and note the URL. 3. In Claude, run: `devtools debug [WEBSITE_URL] --profile --network` to capture performance data. 4. Use `devtools analyze performance --element [SELECTOR]` to drill into specific bottlenecks. 5. Export findings with `devtools export report --format markdown` for team sharing. Tips: - Always test on an incognito window to avoid cached data skewing results - Use the 'Performance' tab first to identify slow interactions - Check 'Memory' tab for detached DOM nodes causing leaks

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

Use the Chrome DevTools MCP server to debug [WEBSITE_URL]. Identify performance bottlenecks in the [PAGE_ELEMENT] and suggest optimizations. Capture a performance profile and analyze the [NETWORK_REQUESTS] for slow responses. Provide a prioritized list of fixes with estimated impact.

Example Output

Debugging report for https://example-ecommerce.com (a fictional online store) using Chrome DevTools MCP:

**Performance Analysis:**
- Total page load time: 4.2s (target: <2s)
- Largest Contentful Paint (LCP): 3.1s (caused by hero image at https://cdn.example.com/hero-1080p.jpg)
- Cumulative Layout Shift (CLS): 0.28 (high - caused by late-loading font at https://fonts.example.com/roboto.woff2)

**Network Bottlenecks:**
1. API call to /api/products?category=electronics took 1.8s (TTFB: 850ms)
2. 12 unused JavaScript files totaling 1.4MB (all from /js/vendor/)
3. 5 blocking CSS files delaying render (critical CSS not inlined)

**Optimization Recommendations:**
1. Implement lazy loading for hero image (estimated 1.2s improvement)
2. Preload Roboto font (estimated 0.4s CLS reduction)
3. Add caching headers for API responses (estimated 0.9s TTFB improvement)
4. Bundle and minify vendor JS (estimated 0.7s reduction)

**Memory Usage:**
- Heap snapshot shows 3 orphaned event listeners on #search-input
- Recommend removing these in the component cleanup phase

Full performance profile and screenshots attached to this report.