Browser Devtools Inspector

Browser DevTools Inspector

Capture and analyze browser DevTools data (Console, Network, Performance) to debug frontend applications and diagnose issues.

Quick Start

Capture Console Logs

node scripts/capture_console.js <url> [--filter=error]

Filters: all, log, warn, error, info

Example:

# Check for errors on storefront
node scripts/capture_console.js http://localhost:5177 --filter=error

Capture Network Requests

node scripts/capture_network.js <url> [--filter=failed] [--type=xhr]

Filters: all, failed, slow
Types: all, xhr, fetch, script, stylesheet, image

Example:

# Find failed API requests
node scripts/capture_network.js http://localhost:5177 --filter=failed --type=xhr

# Check CORS issues
node scripts/check_cors.js http://localhost:5177

Analyze Performance

node scripts/analyze_performance.js <url>

Reports:

• Page load time
• Time to First Byte (TTFB)
• DOM Content Loaded
• Resource loading times
• Slowest resources

Common Workflows

Debug Console Errors

# 1. Capture all console output
node scripts/capture_console.js http://localhost:5177

# 2. Filter errors only
node scripts/capture_console.js http://localhost:5177 --filter=error

# 3. Review output for:
#    - JavaScript errors
#    - Failed network requests
#    - Uncaught exceptions
#    - React/Vue warnings

Diagnose API Failures

# 1. Capture network requests
node scripts/capture_network.js http://localhost:5177 --type=xhr

# 2. Check for CORS
node scripts/check_cors.js http://localhost:5177

# 3. Review output for:
#    - 404 Not Found errors
#    - 401 Unauthorized
#    - 500 Server errors
#    - CORS policy blocks
#    - Network timeouts

Analyze Performance Issues

# 1. Run performance analysis
node scripts/analyze_performance.js http://localhost:5177

# 2. Review metrics:
#    - Load time > 3s = slow
#    - TTFB > 1s = backend issue
#    - Large resources (>1MB)
#    - Blocking scripts

# 3. Identify bottlenecks and optimize

Check for CORS Issues

# Quick CORS check
node scripts/check_cors.js http://localhost:5177

# Output includes:
# - Missing CORS headers
# - Invalid Access-Control-Allow-Origin
# - Blocked requests
# - Preflight failures

Output Format

All scripts output structured JSON for easy parsing:

Console Output

{
  "url": "http://localhost:5177",
  "timestamp": "2026-03-02T02:15:00Z",
  "logs": [
    {
      "level": "error",
      "message": "Failed to load resource: net::ERR_FAILED",
      "source": "http://localhost:8000/api/vendors",
      "lineNumber": 42
    }
  ],
  "summary": {
    "total": 15,
    "errors": 3,
    "warnings": 2,
    "logs": 10
  }
}

Network Output

{
  "url": "http://localhost:5177",
  "timestamp": "2026-03-02T02:15:00Z",
  "requests": [
    {
      "url": "http://localhost:8000/api/products",
      "method": "GET",
      "status": 200,
      "statusText": "OK",
      "type": "xhr",
      "size": 53167,
      "time": 26234,
      "headers": {
        "content-type": "application/json",
        "access-control-allow-origin": "*"
      }
    }
  ],
  "summary": {
    "total": 42,
    "failed": 2,
    "slow": 5,
    "totalSize": 2456789,
    "totalTime": 8234
  }
}

Advanced Usage

Filter by URL Pattern

# Only capture requests to /api/*
node scripts/capture_network.js http://localhost:5177 --pattern="/api/*"

Export Results

# Save to file
node scripts/capture_console.js http://localhost:5177 > console-output.json
node scripts/capture_network.js http://localhost:5177 > network-output.json

Combine with Other Tools

# Parse with jq
node scripts/capture_network.js http://localhost:5177 | jq '.requests[] | select(.status >= 400)'

# Count errors
node scripts/capture_console.js http://localhost:5177 | jq '.summary.errors'

Requirements

• Node.js 14+
• Puppeteer (auto-installed on first run)
• Chrome/Chromium browser

Installation:

cd scripts
npm install

References

• DevTools Protocol: See references/devtools-api.md for full CDP reference
• Common Issues: See references/common-issues.md for troubleshooting patterns

Tips

1. Run locally first - Test on localhost before production URLs
2. Filter aggressively - Use --filter=error to reduce noise
3. Check CORS early - CORS issues are common in development
4. Monitor slow requests - API calls >1s need optimization
5. Save outputs - Redirect to files for later analysis

Troubleshooting

Script Won't Run

# Install dependencies
cd scripts
npm install puppeteer

No Output

# Check if page loads
node scripts/capture_console.js <url> --verbose

Browser Not Found

# Set Chrome path (Windows)
set PUPPETEER_EXECUTABLE_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"

Examples

Real-World Use Cases

Example 1: Debug ThreeU Storefront

# Check console errors
node scripts/capture_console.js http://localhost:5177 --filter=error

# Find failed API calls
node scripts/capture_network.js http://localhost:5177 --filter=failed

# Check CORS
node scripts/check_cors.js http://localhost:5177

Example 2: Analyze SuperAdmin Performance

# Full performance report
node scripts/analyze_performance.js http://localhost:5179

# Find slow API endpoints
node scripts/capture_network.js http://localhost:5179 --filter=slow --type=xhr

Example 3: Monitor Production Issues

# Capture all errors
node scripts/capture_console.js https://storefront.threeu.app --filter=error > prod-errors.json

# Check for 404s
node scripts/capture_network.js https://storefront.threeu.app --filter=failed > prod-404s.json