website-debug

# Website Debugging Skill

Lightweight, token-efficient browser debugging toolkit for frontend development. Uses CLI scripts instead of MCP servers to minimize context usage (~300 tokens vs 13k-18k).

## Quick Start

Use the slash commands for easiest access:
- `/debug-page <url>` - Start debugging session
- `/screenshot` - Take screenshot
- `/pick-element` - Interactive element selection
- `/test-responsive` - Test at all breakpoints
- `/verify-changes` - Verify after making changes

### Or use scripts directly:

```bash
# Start browser
node scripts/browser-start.js
node scripts/browser-start.js --profile  # Preserve logins
node scripts/browser-start.js --webkit   # Safari/WebKit

# Navigate
node scripts/browser-nav.js https://localhost:3000

# Debug
node scripts/browser-screenshot.js
node scripts/browser-eval.js 'document.title'
node scripts/browser-pick.js "Select element"
node scripts/browser-console.js --errors
node scripts/browser-network.js --failures
```

## Core Tools Reference

| Script | Purpose | Output |
|--------|---------|--------|
| `browser-start.js` | Launch Chrome/WebKit with debug port | Status message |
| `browser-nav.js <url>` | Navigate to URL | Confirmation |
| `browser-screenshot.js` | Capture viewport | File path (PNG) |
| `browser-eval.js '<js>'` | Run JS in page | Result or error |
| `browser-pick.js "<msg>"` | Interactive selector | CSS selectors |
| `browser-console.js` | Get console output | Logs/errors |
| `browser-network.js` | Network activity | Request/response data |
| `browser-dom.js "<sel>"` | Get DOM snapshot | HTML fragment |
| `browser-close.js` | Close browser | Confirmation |

## Self-Debugging Workflow

When debugging frontend code Claude has written or modified:

### 1. Visual Verification Loop
```bash
# After making CSS/HTML changes, verify visually
node scripts/browser-screenshot.js
# Claude reads the screenshot, identifies issues, iterates
```

### 2. Console Error Detection
```bash
# Check for JavaScript errors after