Browser Debugging

## Interactive Testing Flow

### Step 1: Get Page Structure
\`\`\`
mcp__claude-in-chrome__read_page()
# Returns DOM structure with element references
\`\`\`

### Step 2: Test Each Interactive Element

**Button Test**:
\`\`\`
# Before
mcp__claude-in-chrome__computer(action: "screenshot")

# Find and click button (natural language)
mcp__claude-in-chrome__find(description: "submit button")
mcp__claude-in-chrome__computer(action: "left_click", coordinate: [x, y])

# OR click by reference
mcp__claude-in-chrome__computer(action: "click", ref: "button[type=submit]")

# After (wait for response)
# Wait a moment for response
mcp__claude-in-chrome__computer(action: "screenshot")

# Check results
mcp__claude-in-chrome__read_console_messages()
mcp__claude-in-chrome__read_network_requests()
\`\`\`

**Form Test**:
\`\`\`
# Fill form fields
mcp__claude-in-chrome__form_input(
  selector: "#email",
  value: "test@example.com"
)
mcp__claude-in-chrome__form_input(
  selector: "#password",
  value: "SecurePass123!"
)

# Submit (click button)
mcp__claude-in-chrome__find(description: "submit button")
mcp__claude-in-chrome__computer(action: "left_click", coordinate: [x, y])

# Verify success
mcp__claude-in-chrome__read_page()
# Check for success indicators
\`\`\`

**Hover State Test**:
\`\`\`
mcp__claude-in-chrome__computer(action: "screenshot")
mcp__claude-in-chrome__find(description: "primary button")
mcp__claude-in-chrome__computer(action: "hover", coordinate: [x, y])
mcp__claude-in-chrome__computer(action: "screenshot")
# Compare screenshots for hover state changes
\`\`\`

### Step 3: Analyze Interaction Results

Use vision model to compare before/after screenshots:
\`\`\`bash
npx claudish --model google/gemini-2.5-flash --stdin --quiet <<EOF
Compare these before/after screenshots and verify the interaction worked:

BEFORE: [screenshot before interaction]
AFTER: [screenshot after interaction]

Expected behavior: [describe what should happen]

Verify:
1. Did the expected UI change occur?
2. Are there any error states visible?
3. Did loading states appear/disappear correctly?
4. Is the final state correct?

Report: PASS/FAIL with specific observations.
EOF
\`\`\`

## Responsive Testing

### Breakpoints to Test

| Breakpoint | Width | Description |
|------------|-------|-------------|
| Mobile | 375px | iPhone SE |
| Mobile L | 428px | iPhone 14 Pro Max |
| Tablet | 768px | iPad |
| Desktop | 1280px | Laptop |
| Desktop L | 1920px | Full HD |

### Automated Responsive Check

\`\`\`bash
#!/bin/bash
# Test all breakpoints

BREAKPOINTS=(375 428 768 1280 1920)
URL="http://localhost:5173/your-route"

for width in "\${BREAKPOINTS[@]}"; do
  echo "Testing \${width}px..."

  # Navigate (once)
  mcp__claude-in-chrome__navigate(url: "$URL")

  # Resize and screenshot
  mcp__claude-in-chrome__resize_window(width: $width, height: 900)
  mcp__claude-in-chrome__computer(action: "screenshot")
  # Save/analyze screenshot
done
\`\`\`

### Visual Analysis for Responsive Issues

\`\`\`bash
npx claudish --model qwen/qwen3-vl-32b-instruct --stdin --quiet <<EOF
Analyze these responsive screenshots for layout issues:

MOBILE (375px): [screenshot 1]
TABLET (768px): [screenshot 2]
DESKTOP (1280px): [screenshot 3]

Check for:
1. Text overflow or truncation
2. Elements overlapping
3. Improper stacking on mobile
4. Touch targets too small (<44px)
5. Hidden content that shouldn't be hidden
6. Horizontal scroll issues
7. Image scaling problems

Report issues by breakpoint with specific CSS fixes.
EOF
\`\`\`

## Accessibility Check

### Automated A11y Testing

\`\`\`
# Get full page content for accessibility tree analysis
mcp__claude-in-chrome__read_page()

# Get all text content
mcp__claude-in-chrome__get_page_text()

# Check for common issues:
# - Missing alt text (look for img without alt in read_page)
# - Missing ARIA labels
# - Incorrect heading hierarchy
# - Missing form labels
\`\`\`

### Visual Contrast Analysis

\`\`\`bash
npx claudish --model qwen/qwen3-vl-32b-instruct --stdin --quiet <<EOF
Analyze this screenshot for accessibility issues:

IMAGE: [screenshot]

Check WCAG 2.1 AA compliance:

1. **Color Contrast**
   - Text contrast ratio (need 4.5:1 for normal, 3:1 for large)
   - Interactive element contrast
   - Focus indicator visibility

2. **Visual Cues**
   - Do links have underlines or other visual differentiation?
   - Are error states clearly visible?
   - Are required fields indicated?

3. **Text Readability**
   - Font size (minimum 16px for body)
   - Line height (minimum 1.5)
   - Line length (max 80 characters)

4. **Touch Targets**
   - Minimum 44x44px for interactive elements
   - Adequate spacing between targets

Report violations with severity and specific fixes.
EOF
\`\`\`

## Debug Session

### Real-Time Console Monitoring

\`\`\`
# Get all console messages
mcp__claude-in-chrome__read_console_messages()

# Response includes:
# - Type (log, warn, error, info)
# - Message content
# - Timestamp
# - Stack trace (for errors)
\`\`\`

### Network Request Analysis

\`\`\`
# Get all network requests
mcp__claude-in-chrome__read_network_requests()

# Response includes:
# - URL
# - Method (GET, POST, etc.)
# - Status code
# - Response time
# - Request/response headers
# - Request/response body (if available)
\`\`\`

### Error Pattern Analysis

Common error patterns to look for:

| Error Type | Pattern | Common Cause |
|------------|---------|--------------|
| React Error | "Cannot read property" | Missing null check |
| React Error | "Invalid hook call" | Hook rules violation |
| Network Error | "CORS" | Missing CORS headers |
| Network Error | "401" | Auth token expired |
| Network Error | "404" | Wrong API endpoint |
| Network Error | "500" | Server error |

## Developer Self-Validation Protocol

1. Save code changes
2. Navigate to the page: \`mcp__claude-in-chrome__navigate\`
3. Take screenshot: \`mcp__claude-in-chrome__computer(action: "screenshot")\`
4. Check console: \`mcp__claude-in-chrome__read_console_messages()\`
5. Check network: \`mcp__claude-in-chrome__read_network_requests()\`
6. Report: "Implementation verified - [X] console errors, [Y] network failures"

## Reviewer Validation Protocol

1. Read the code changes
2. Navigate to affected pages
3. Take screenshots of all changed components
4. Use vision model for visual analysis (if design reference available)
5. Check console for new errors introduced
6. Verify no regression in existing functionality
7. Report: "Visual review complete - [findings]"

## Tester Validation Protocol

1. Navigate to test target
2. Get page structure for element references
3. Execute test scenarios (interactions, forms, navigation)
4. Capture before/after screenshots for each action
5. Monitor console throughout
6. Monitor network throughout
7. Use vision model for visual regression detection
8. Generate detailed test report

## UI-Developer Validation Protocol

1. Apply CSS/styling fixes
2. Take screenshot of fixed component
3. Compare with design reference using vision model
4. Verify fix doesn't break other viewports (responsive check)
5. Check console for any styling-related errors
6. Report: "Fix applied and verified - [before/after comparison]"