Script	Purpose	Usage
`collect-single-page.sh`	Collect logs from one page	Manual MCP tool usage
`collect-multiple-pages.sh`	Collect logs from multiple pages	Automated with MCP injection signals
`auto-inject.sh`	Manual log injection helper	Claude Code MCP integration
`analyze-logs.sh`	Generate summary after real logs injected	Analyzes real data and creates accurate summary

🚀 Quick Start

Single Page Collection

# Test the home page
./scripts/browser-logs/collect-single-page.sh /

# Test contact page
./scripts/browser-logs/collect-single-page.sh /contact

Multiple Pages Collection (Recommended)

# Step 1: Collect logs from multiple pages
./scripts/browser-logs/collect-multiple-pages.sh /,/contact,/about

# Step 2: After Claude Code injects real logs, analyze results
./scripts/browser-logs/analyze-logs.sh browser-logs-TIMESTAMP

# Test common pages
./scripts/browser-logs/collect-multiple-pages.sh all

📋 Step-by-Step Process

Manual Collection (Recommended for Learning)

Run Collection Script

./scripts/browser-logs/collect-single-page.sh /contact

Script Will:
- Open Chrome to the specified page
- Wait for hydration (8 seconds)
- Create a log file with placeholders
- Show you what MCP tools to run

In Claude Code, Run:

mcp__browser-tools__getConsoleLogs
mcp__browser-tools__getConsoleErrors
mcp__browser-tools__getNetworkErrors

Copy Results into the generated log file

Auto-Injection Collection (Advanced)

Create Initial Log File
```
echo "Log for /contact" > test.log
```

Run Auto-Injection

./scripts/browser-logs/auto-inject.sh /contact test.log

Claude Code Detects and Injects real MCP data automatically

📊 What You Get

Each collection creates log files with:

Console Logs: All console.log, console.warn messages
Console Errors: JavaScript errors, panics, runtime failures
Network Errors: Failed requests, resource loading issues
Timestamps: When logs were collected
Page Info: URL, hydration status

🎯 Common Use Cases

Debug Hydration Issues

./scripts/browser-logs/collect-single-page.sh /
# Look for "hydration error" or "Option::unwrap" panics

Compare Pages

./scripts/browser-logs/collect-multiple-pages.sh /,/contact
# Compare error patterns between pages

Systematic Testing

./scripts/browser-logs/collect-multiple-pages.sh all
# Test all common pages systematically

🔧 Requirements

Chrome Browser: Scripts use AppleScript to control Chrome
Server Running: Pages must be accessible at http://localhost:3030
Claude Code: For MCP tool integration

📝 Output Format

========================================
Browser Log Collection: contact
URL: http://localhost:3030/contact
Timestamp: Wed Aug  6 03:30:15 WEST 2025
========================================

[03:30:15] Browser opened
[03:30:23] Page hydrated
[03:30:23] Ready for MCP collection

--- MCP RESULTS ---

=== CONSOLE LOGS ===
(Real browser console.log entries)

=== CONSOLE ERRORS ===
(Real JavaScript errors and panics)

=== NETWORK ERRORS ===
(Failed network requests)

⚡ Quick Commands

# Complete workflow (recommended)
./scripts/browser-logs/collect-multiple-pages.sh /,/contact
# Claude Code will inject real logs automatically
./scripts/browser-logs/analyze-logs.sh browser-logs-TIMESTAMP

# Single page (manual)
./scripts/browser-logs/collect-single-page.sh /

# Analysis only (after real logs injected)
./scripts/browser-logs/analyze-logs.sh <log-directory>

📊 What You Get

After running the complete workflow, you'll have:

Real browser logs with actual console errors and warnings
Comprehensive analysis summary with error counts and patterns
Actionable recommendations for fixing identified issues
Cross-page error comparison to identify systematic problems

These scripts provide a complete solution for browser log collection and analysis.