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.

Security Scan

The skill’s files and runtime instructions match its stated purpose (capturing Console, Network, Performance, and CORS data via Puppeteer); nothing requested or installed is disproportionate to that goal.

Purpose & Capability

Name/description match the included scripts: capture_console.js, capture_network.js, analyze_performance.js, and check_cors.js all use Puppeteer to collect DevTools data. No unrelated credentials, binaries, or config paths are requested.

Instruction Scope

SKILL.md simply tells the agent/user to run the included Node scripts against a URL. This is appropriately scoped to DevTools inspection. Note: the scripts accept arbitrary URLs and will execute page JavaScript and network requests in a headless browser, so captured output may include sensitive data printed by the page or returned by APIs (this is expected for a debugging tool).

Install Mechanism

There is no installer spec in the registry; the package includes package.json that depends on puppeteer. That is reasonable for these scripts. Be aware npm install / puppeteer will download a Chromium build on first install (network activity and disk write are expected).

Credentials

The skill requests no environment variables or credentials. The README mentions an optional PUPPETEER_EXECUTABLE_PATH to point to a local Chrome binary — consistent and optional for Puppeteer usage.

Persistence & Privilege

The skill is not always-enabled and does not request persistent platform privileges or modify other skills. It runs on-demand via CLI scripts, which is appropriate for its purpose.

Assessment

This skill appears coherent for DevTools-style debugging. Before running it: (1) run it locally or in an isolated environment, especially if you will point it at production/internal URLs — the scripts execute page JavaScript and capture console/network output which may include secrets; (2) review any JSON output before sharing; (3) be aware npm install will download Chromium via puppeteer (large download, network access); (4) if you want to avoid auto-downloaded Chromium, set PUPPETEER_EXECUTABLE_PATH to a trusted local Chrome/Chromium binary; (5) avoid running against authenticated endpoints unless you intentionally want the tool to observe authenticated requests and responses; and (6) if you have concerns about visiting untrusted pages, run in a sandboxed environment (VM/container) to limit risk.

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