cdp-extended-mcp

cdp-extended-mcp

An MCP (Model Context Protocol) server that exposes 5 powerful Chrome DevTools Protocol domains that are missing from existing tools:

1. Fetch — Intercept & modify HTTP requests mid-flight (mock APIs, block tracking, inject headers)
2. Emulation — Device simulation (iPhone/Pixel/iPad presets, geolocation, timezone, dark mode, vision deficiencies)
3. Accessibility — A11y tree inspection & automated auditing (missing labels, alt text, ARIA compliance)
4. Performance — Runtime metrics, CPU profiling, heap snapshots, Core Web Vitals
5. CSS — Computed styles, matched rules, font inspection, coverage tracking, live modification

38 Tools Available

Connection

| Tool | Description | |------|-------------| | connect_cdp | Connect to Chrome via WebSocket URL | | discover_targets | List available Chrome debugging targets | | disconnect_cdp | Disconnect from Chrome |

Fetch (Request Interception)

| Tool | Description | |------|-------------| | fetch_enable | Enable request interception with URL patterns | | fetch_disable | Disable interception | | fetch_continue | Continue paused request with optional modifications | | fetch_fulfill | Respond with custom/mock response | | fetch_fail | Fail a request with an error | | fetch_get_body | Get response body of intercepted request | | fetch_list_paused | List all paused requests |

Emulation (Device Simulation)

| Tool | Description | |------|-------------| | emulate_device | Emulate iPhone, Pixel, iPad, Galaxy, Desktop | | emulate_custom_device | Custom viewport, DPR, mobile mode | | emulate_geolocation | Fake geolocation to any coordinates | | emulate_timezone | Override timezone | | emulate_locale | Override locale for i18n testing | | emulate_user_agent | Override user agent string | | emulate_dark_mode | Toggle dark mode | | emulate_reduced_motion | Toggle reduced motion | | emulate_vision_deficiency | Simulate color blindness, blurred vision | | emulate_cpu_throttle | Throttle CPU for low-end device simulation | | emulate_touch | Toggle touch emulation | | emulate_clear_all | Reset all emulation overrides | | emulate_list_devices | List available device presets |

Accessibility

| Tool | Description | |------|-------------| | a11y_audit | Automated a11y audit (missing labels, alt text, etc.) | | a11y_tree | Get full accessibility tree | | a11y_query | Search a11y tree by role/name |

Performance

| Tool | Description | |------|-------------| | perf_metrics | Runtime performance metrics | | perf_web_vitals | Core Web Vitals with ratings | | perf_cpu_profile_start | Start CPU profiling | | perf_cpu_profile_stop | Stop profiling, get hotspot analysis | | perf_heap_snapshot | Take heap memory snapshot |

CSS

| Tool | Description | |------|-------------| | css_computed_style | Get computed styles (optionally filtered) | | css_matched_rules | Get all matching CSS rules | | css_background_colors | Background colors + font info | | css_force_pseudo | Force :hover, :focus, :active states | | css_fonts | Get actual rendered fonts | | css_media_queries | List all media queries | | css_coverage_start | Start CSS coverage tracking | | css_coverage_stop | Get used vs unused CSS report | | css_set_property | Live-modify CSS properties |

Quick Start

Install

npm install -g cdp-extended-mcp

Configure with Claude Code

Add to your Claude Code settings (~/.claude/settings.json):

{
  "mcpServers": {
    "cdp-extended": {
      "command": "cdp-extended-mcp"
    }
  }
}

Configure with Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "cdp-extended": {
      "command": "npx",
      "args": ["cdp-extended-mcp"]
    }
  }
}

Usage

1. Launch Chrome with debugging enabled:

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

1. Use discover_targets to find available pages
2. Use connect_cdp with the WebSocket URL
3. Use any of the 38 tools!

Works great alongside cdp-tools

This server is designed to complement the existing cdp-tools MCP server. Use cdp-tools for navigation, clicking, screenshots, and breakpoints. Use cdp-extended for the 5 domains cdp-tools doesn't cover.

Use Cases

• API Mocking: Intercept fetch requests and return mock data — no backend needed
• Mobile Testing: Emulate any device with one command
• A11y Auditing: Find missing labels, alt text, and ARIA issues automatically
• Performance Profiling: Get Core Web Vitals, CPU hotspots, and memory leaks
• CSS Debugging: See exactly which rules apply, find unused CSS, check font rendering
• i18n Testing: Switch timezone, locale, and language without system changes
• Vision Accessibility: Test how your site looks with color blindness

License

MIT