browser Devtools Inspector

Inspect and analyze browser DevTools Console, Network, and Performance data to debug frontend issues like errors, failed requests, CORS, and slow loads.

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

Quick Start

Capture Console Logs

bash

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

Filters: all, log, warn, error, info

Example:

bash

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

Capture Network Requests

bash

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

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

Example:

bash

# 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

bash

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

bash

# 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

bash

# 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

bash

# 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

bash

# 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

json

{
  "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

json

{
  "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

bash

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

Export Results

bash

# 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

bash

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

bash

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

bash

# Install dependencies
cd scripts
npm install puppeteer

No Output

bash

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

Browser Not Found

bash

# 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

bash

# 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

bash

# 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

bash

# 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