devtools

# Chrome DevTools MCP Setup

## Overview

This skill automates the setup and launch of Chrome with remote debugging for use with the chrome-devtools-mcp server. It handles environment detection, Chrome installation verification, MCP configuration, and browser launch across Windows, Linux, and WSL2.

**GitHub Repository:** https://github.com/ChromeDevTools/chrome-devtools-mcp

## Why Give Claude Browser Access?

Without browser access, Claude is "coding blindfolded" - making changes without seeing the results. The Chrome DevTools MCP server provides **26 specialised tools** that give Claude eyes into your running application:

| Category | Capabilities |
|----------|--------------|
| **Visual Inspection** | Take screenshots, capture DOM snapshots, see rendered output |
| **Console & Logging** | Read console messages, catch JavaScript errors, debug issues |
| **Network Analysis** | Inspect API requests/responses, analyse headers, debug fetch calls |
| **Performance** | Record traces, measure Core Web Vitals (LCP, CLS, TBT), identify bottlenecks |
| **User Simulation** | Click elements, fill forms, drag-and-drop, handle dialogs |
| **Device Emulation** | Simulate mobile viewports, throttle CPU/network, test responsive design |

This enables Claude to:
- **Verify changes visually** instead of guessing if CSS/layout is correct
- **Debug runtime errors** by reading actual console output
- **Test user flows** by simulating clicks and form submissions
- **Identify performance issues** with real Core Web Vitals data
- **Catch regressions** by comparing screenshots before/after changes

## Quick Start Workflow

Execute these steps in order:

### Step 1: Detect Environment

Run the environment detection script to determine the platform:

```bash
bash scripts/detect_environment.sh
```

The script returns one of: `windows`, `linux`, or `wsl2`

### Step 2: Verify Chrome Installation

Run the Chrome check script with the detected environment:

```bash
bash scripts/check_chrome.sh