{"skill":{"slug":"qtada-browser-devtools-inspector","displayName":"browser Devtools Inspector","summary":"Inspect and analyze browser DevTools Console, Network, and Performance data to debug frontend issues like errors, failed requests, CORS, and slow loads.","description":"---\nname: browser-devtools-inspector\ndescription: 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.\n---\n\n# Browser DevTools Inspector\n\nCapture and analyze browser DevTools data (Console, Network, Performance) to debug frontend applications and diagnose issues.\n\n## Quick Start\n\n### Capture Console Logs\n\n```bash\nnode scripts/capture_console.js <url> [--filter=error]\n```\n\nFilters: `all`, `log`, `warn`, `error`, `info`\n\n**Example:**\n```bash\n# Check for errors on storefront\nnode scripts/capture_console.js http://localhost:5177 --filter=error\n```\n\n### Capture Network Requests\n\n```bash\nnode scripts/capture_network.js <url> [--filter=failed] [--type=xhr]\n```\n\nFilters: `all`, `failed`, `slow`  \nTypes: `all`, `xhr`, `fetch`, `script`, `stylesheet`, `image`\n\n**Example:**\n```bash\n# Find failed API requests\nnode scripts/capture_network.js http://localhost:5177 --filter=failed --type=xhr\n\n# Check CORS issues\nnode scripts/check_cors.js http://localhost:5177\n```\n\n### Analyze Performance\n\n```bash\nnode scripts/analyze_performance.js <url>\n```\n\nReports:\n- Page load time\n- Time to First Byte (TTFB)\n- DOM Content Loaded\n- Resource loading times\n- Slowest resources\n\n---\n\n## Common Workflows\n\n### Debug Console Errors\n\n```bash\n# 1. Capture all console output\nnode scripts/capture_console.js http://localhost:5177\n\n# 2. Filter errors only\nnode scripts/capture_console.js http://localhost:5177 --filter=error\n\n# 3. Review output for:\n#    - JavaScript errors\n#    - Failed network requests\n#    - Uncaught exceptions\n#    - React/Vue warnings\n```\n\n### Diagnose API Failures\n\n```bash\n# 1. Capture network requests\nnode scripts/capture_network.js http://localhost:5177 --type=xhr\n\n# 2. Check for CORS\nnode scripts/check_cors.js http://localhost:5177\n\n# 3. Review output for:\n#    - 404 Not Found errors\n#    - 401 Unauthorized\n#    - 500 Server errors\n#    - CORS policy blocks\n#    - Network timeouts\n```\n\n### Analyze Performance Issues\n\n```bash\n# 1. Run performance analysis\nnode scripts/analyze_performance.js http://localhost:5177\n\n# 2. Review metrics:\n#    - Load time > 3s = slow\n#    - TTFB > 1s = backend issue\n#    - Large resources (>1MB)\n#    - Blocking scripts\n\n# 3. Identify bottlenecks and optimize\n```\n\n### Check for CORS Issues\n\n```bash\n# Quick CORS check\nnode scripts/check_cors.js http://localhost:5177\n\n# Output includes:\n# - Missing CORS headers\n# - Invalid Access-Control-Allow-Origin\n# - Blocked requests\n# - Preflight failures\n```\n\n---\n\n## Output Format\n\nAll scripts output structured JSON for easy parsing:\n\n### Console Output\n```json\n{\n  \"url\": \"http://localhost:5177\",\n  \"timestamp\": \"2026-03-02T02:15:00Z\",\n  \"logs\": [\n    {\n      \"level\": \"error\",\n      \"message\": \"Failed to load resource: net::ERR_FAILED\",\n      \"source\": \"http://localhost:8000/api/vendors\",\n      \"lineNumber\": 42\n    }\n  ],\n  \"summary\": {\n    \"total\": 15,\n    \"errors\": 3,\n    \"warnings\": 2,\n    \"logs\": 10\n  }\n}\n```\n\n### Network Output\n```json\n{\n  \"url\": \"http://localhost:5177\",\n  \"timestamp\": \"2026-03-02T02:15:00Z\",\n  \"requests\": [\n    {\n      \"url\": \"http://localhost:8000/api/products\",\n      \"method\": \"GET\",\n      \"status\": 200,\n      \"statusText\": \"OK\",\n      \"type\": \"xhr\",\n      \"size\": 53167,\n      \"time\": 26234,\n      \"headers\": {\n        \"content-type\": \"application/json\",\n        \"access-control-allow-origin\": \"*\"\n      }\n    }\n  ],\n  \"summary\": {\n    \"total\": 42,\n    \"failed\": 2,\n    \"slow\": 5,\n    \"totalSize\": 2456789,\n    \"totalTime\": 8234\n  }\n}\n```\n\n---\n\n## Advanced Usage\n\n### Filter by URL Pattern\n```bash\n# Only capture requests to /api/*\nnode scripts/capture_network.js http://localhost:5177 --pattern=\"/api/*\"\n```\n\n### Export Results\n```bash\n# Save to file\nnode scripts/capture_console.js http://localhost:5177 > console-output.json\nnode scripts/capture_network.js http://localhost:5177 > network-output.json\n```\n\n### Combine with Other Tools\n```bash\n# Parse with jq\nnode scripts/capture_network.js http://localhost:5177 | jq '.requests[] | select(.status >= 400)'\n\n# Count errors\nnode scripts/capture_console.js http://localhost:5177 | jq '.summary.errors'\n```\n\n---\n\n## Requirements\n\n- Node.js 14+\n- Puppeteer (auto-installed on first run)\n- Chrome/Chromium browser\n\n**Installation:**\n```bash\ncd scripts\nnpm install\n```\n\n---\n\n## References\n\n- **DevTools Protocol**: See `references/devtools-api.md` for full CDP reference\n- **Common Issues**: See `references/common-issues.md` for troubleshooting patterns\n\n---\n\n## Tips\n\n1. **Run locally first** - Test on localhost before production URLs\n2. **Filter aggressively** - Use `--filter=error` to reduce noise\n3. **Check CORS early** - CORS issues are common in development\n4. **Monitor slow requests** - API calls >1s need optimization\n5. **Save outputs** - Redirect to files for later analysis\n\n---\n\n## Troubleshooting\n\n### Script Won't Run\n```bash\n# Install dependencies\ncd scripts\nnpm install puppeteer\n```\n\n### No Output\n```bash\n# Check if page loads\nnode scripts/capture_console.js <url> --verbose\n```\n\n### Browser Not Found\n```bash\n# Set Chrome path (Windows)\nset PUPPETEER_EXECUTABLE_PATH=\"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\"\n```\n\n---\n\n## Examples\n\n### Real-World Use Cases\n\n**Example 1: Debug ThreeU Storefront**\n```bash\n# Check console errors\nnode scripts/capture_console.js http://localhost:5177 --filter=error\n\n# Find failed API calls\nnode scripts/capture_network.js http://localhost:5177 --filter=failed\n\n# Check CORS\nnode scripts/check_cors.js http://localhost:5177\n```\n\n**Example 2: Analyze SuperAdmin Performance**\n```bash\n# Full performance report\nnode scripts/analyze_performance.js http://localhost:5179\n\n# Find slow API endpoints\nnode scripts/capture_network.js http://localhost:5179 --filter=slow --type=xhr\n```\n\n**Example 3: Monitor Production Issues**\n```bash\n# Capture all errors\nnode scripts/capture_console.js https://storefront.threeu.app --filter=error > prod-errors.json\n\n# Check for 404s\nnode scripts/capture_network.js https://storefront.threeu.app --filter=failed > prod-404s.json\n```\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":1135,"installsAllTime":43,"installsCurrent":0,"stars":1,"versions":1},"createdAt":1772407540411,"updatedAt":1778994351359},"latestVersion":{"version":"1.0.0","createdAt":1772407540411,"changelog":"Initial release of browser-devtools-inspector.\n\n- Capture and analyze browser Console, Network, and Performance data from real browser sessions.\n- Scripts for console logs, network requests (failed, slow, by type), and automated CORS checks.\n- Performance analysis report with key frontend metrics (load time, TTFB, slowest resources).\n- Output structured JSON for easy parsing and integration with other tools.\n- Includes quick tips, troubleshooting steps, and practical real-world usage examples.\n- Works through Node.js and Puppeteer with simple CLI commands.","license":null},"metadata":null,"owner":{"handle":"qtadagm","userId":"s173tgwbp0gmbhhw03kz5vd1n18846gw","displayName":"QtadaGM","image":"https://avatars.githubusercontent.com/u/155848120?v=4"},"moderation":null}