# Chrome Devtools

> Use when the user needs deep browser debugging, performance profiling, network packet capture, or direct Chrome DevTools Protocol (CDP) access. Triggers on devtools, debug chrome, capture packets, network capture, performance profile, CDP debug, inspect traffic, remote debugging, chrome inspect.

- Skill: `ralfnick/chrome-devtools` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ralfnick/chrome-devtools`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ralfnick/chrome-devtools/raw
- Safety review: pending (external: skill-scanner WARNING, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: RalfNick (https://skillmd.com/u/ralfnick)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ralfnick/chrome-devtools

---


# Chrome DevTools Automation

Deep browser debugging and network capture via Chrome DevTools Protocol (CDP).

## When to Use

- Network packet capture and API traffic analysis
- Performance profiling and Core Web Vitals
- JavaScript debugging and breakpoints
- DOM inspection and manipulation via CDP
- Cookie/storage inspection with full detail
- Extracting auth tokens from running sessions

Do NOT use for general browser automation (use `playwright-cli` instead).

## Prerequisites

### Enable Chrome Remote Debugging

Option A — Launch Chrome with flag:
```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
```

Option B — Chrome M144+ built-in (recommended):
1. Open `chrome://inspect/#remote-debugging`
2. Enable remote debugging from the UI
3. Default port: 9222

### Verify Connection
```bash
curl -s http://localhost:9222/json/version | python3 -m json.tool
curl -s http://localhost:9222/json/list | python3 -m json.tool
```

## Network Capture Workflow

### Quick Capture (recommended for api-harvester)

1. Connect to Chrome debugging port
2. Enable Network domain
3. User navigates and operates the target site
4. Collect all request/response pairs
5. Export as HAR or structured JSON

### CDP Network Commands

```python
import json, websocket

# Connect to first tab
tabs = json.loads(requests.get("http://localhost:9222/json/list").text)
ws_url = tabs[0]["webSocketDebuggerUrl"]
ws = websocket.create_connection(ws_url)

# Enable network capture
ws.send(json.dumps({"id": 1, "method": "Network.enable"}))

# Listen for requests
while True:
    msg = json.loads(ws.recv())
    method = msg.get("method", "")
    if method == "Network.requestWillBeSent":
        req = msg["params"]["request"]
        print(f"{req['method']} {req['url']}")
    elif method == "Network.responseReceived":
        resp = msg["params"]["response"]
        print(f"  → {resp['status']} {resp['mimeType']}")
```

### Get Response Body
```python
# After responseReceived, get the body
ws.send(json.dumps({
    "id": 2,
    "method": "Network.getResponseBody",
    "params": {"requestId": request_id}
}))
result = json.loads(ws.recv())
body = result["result"]["body"]
```

## Performance Profiling

```python
# Start profiling
ws.send(json.dumps({"id": 1, "method": "Performance.enable"}))
ws.send(json.dumps({"id": 2, "method": "Performance.getMetrics"}))
metrics = json.loads(ws.recv())
```

## Auth Token Extraction

Extract cookies and auth headers from a logged-in session:

```python
# Get all cookies
ws.send(json.dumps({"id": 1, "method": "Network.getAllCookies"}))
cookies = json.loads(ws.recv())["result"]["cookies"]

# Or extract from captured request headers
# Look for: Authorization, Cookie, X-CSRF-Token, Bearer tokens
```

## Common CDP Domains

| Domain | Purpose |
|--------|---------|
| `Network` | Request/response capture, cookies, caching |
| `Page` | Navigation, screenshots, lifecycle events |
| `Runtime` | JS evaluation, console |
| `DOM` | DOM tree inspection, manipulation |
| `Performance` | Metrics, profiling |
| `Debugger` | Breakpoints, stepping |
| `Storage` | localStorage, sessionStorage, IndexedDB |

## Integration with api-harvester

This skill provides the real-time capture backend for api-harvester Mode B:
1. chrome-devtools captures network traffic via CDP
2. api-harvester's `analyze_har.py` processes the captured data
3. Endpoints are scored, grouped, and presented for skill generation

See `references/cdp-capture-guide.md` for the full CDP capture protocol reference.