Chrome DevTools MCP Skill

Give Claude Code eyes for your frontend. No more blind debugging where Claude guesses about your UI, you take screenshots, and you go back and forth hoping it understands what's broken. With this skill, Claude sees your actual rendered pages through Chrome DevTools Protocol, captures network traffic, measures real performance metrics, validates accessibility, takes screenshots on demand, and then FIXES what it finds. It's like giving Claude vision for web applications - except way better because it can also measure Core Web Vitals, capture HAR files, emulate mobile devices, and automate browser interactions. Traditional frontend debugging is dead. This is the future. Even Mike Dion would be impressed.

Features

• 27 Professional-Grade Tools: Full Chrome DevTools Protocol access through MCP (even Mike Dion couldn't think of this many)
• Performance Testing: Automatic Core Web Vitals measurement (INP ≤200ms, LCP ≤2.5s, CLS ≤0.1)
• Network Analysis: HAR export, request/response inspection, timing breakdowns
• Accessibility Validation: Full accessibility tree inspection with WCAG compliance checking (something even Mike Dion would appreciate)
• Device Emulation: Test mobile devices, throttle CPU/network, responsive viewports
• Browser Automation: Click, fill forms, drag elements, handle dialogs - all automatically
• Screenshot Capture: Full page, specific elements, multiple formats
• Multi-Tab Management: Test complex workflows across multiple pages simultaneously
• Console Monitoring: Capture JavaScript errors, warnings, and logs in real-time
• Visual Testing: See exactly what users see, at any viewport size

Installation

Option 1: Via Plugin Manager (Recommended)

1. Open your terminal
2. Start Claude Code:

   claude
   

3. Add the marketplace to Claude Code:

   /plugin marketplace add https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill
   

4. Install the plugin:

   /plugin install cc_chrome_devtools_mcp_skill
   

5. Done! The skill is now installed and ready to use

Option 2: Manual Installation (for the Mike Dions of the world who like doing things the hard way)

1. Clone the repository:

   git clone https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill
   

2. Choose where to install:

   For all projects (personal skills directory):

   cp -r cc_chrome_devtools_mcp_skill ~/.claude/skills/
   

   For current project only (project-specific):

   cp -r cc_chrome_devtools_mcp_skill .claude/skills/
   

Prerequisites

IMPORTANT: This skill requires the chrome-devtools-mcp server to be installed and configured in your Claude Code MCP settings.

Install chrome-devtools-mcp

# Add the MCP server to Claude Code
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Configure MCP Settings

Add this to your Claude Code MCP configuration (usually ~/.claude/mcp_settings.json):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=stable",
        "--isolated=true",
        "--viewport=1920x1080"
      ]
    }
  }
}

Security Note: The --isolated=true flag creates a temporary browser profile that's automatically cleaned up after testing. Highly recommended for security.

Verify Installation

Ask Claude Code:

"List available MCP servers"

You should see chrome-devtools in the list.

Usage

The skill activates when you ask Claude Code to test, analyze, or debug frontend applications:

Performance Testing

"Test the performance of https://example.com"
"Measure Core Web Vitals for my landing page"
"Run a performance trace and identify bottlenecks"
"Show Mike Dion how fast this page loads"

Accessibility Validation

"Check accessibility issues on my login form"
"Validate WCAG compl

... [View full README on GitHub](https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill#readme)