Inspect and analyze browser DevTools Console, Network, and Performance data to debug frontend issues like errors, failed requests, CORS, and slow loads.
---
name: browser-devtools-inspector
description: Inspect browser DevTools (Console, Network, Performance) for debugging frontend applications. Use when: (1) checking console errors or warnings, (2) analyzing failed API requests or CORS issues, (3) investigating slow page loads or network performance, (4) debugging JavaScript errors, (5) inspecting HTTP request/response headers, (6) monitoring API endpoints during page load, or (7) troubleshooting frontend issues with real browser data.
---
# Browser DevTools Inspector
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
```
don't have the plugin yet? install it then click "run inline in claude" again.