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:

/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

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

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

# 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

# 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:

# 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

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.