Debugging Skill
Debug web applications using console inspection, network analysis, and non-blocking code debugging with tracepoints, logpoints, and exception monitoring.
When to Use
This skill activates when:
- •User reports a bug or error on a web page
- •User asks to debug JavaScript issues
- •User wants to inspect API calls or network requests
- •User needs to troubleshoot page loading issues
- •User mentions console errors or warnings
- •User wants to debug without breakpoints
- •User needs to trace function calls or monitor variables
Capabilities
Console Inspection
bash
browser-devtools-cli o11y get-console-messages browser-devtools-cli o11y get-console-messages --types error,warn browser-devtools-cli --json o11y get-console-messages --types error
Network Analysis
bash
browser-devtools-cli o11y get-http-requests browser-devtools-cli --json o11y get-http-requests --resource-type fetch,xhr browser-devtools-cli --json o11y get-http-requests --status-min 400
JavaScript Execution
bash
browser-devtools-cli run js-in-browser --script "document.title"
browser-devtools-cli run js-in-browser --script "localStorage.getItem('token')"
browser-devtools-cli run js-in-sandbox --code "return await page.evaluate(() => window.myVar)"
Tracepoints (Non-Blocking)
bash
browser-devtools-cli debug put-tracepoint --url-pattern "app.js" --line-number 42 browser-devtools-cli debug list-tracepoints browser-devtools-cli debug remove-tracepoint --id <tracepoint-id> browser-devtools-cli debug clear-tracepoints
Logpoints
bash
browser-devtools-cli debug put-logpoint --url-pattern "app.js" --line-number 50 --expression "user.id" browser-devtools-cli debug list-logpoints browser-devtools-cli debug clear-logpoints
Exception Monitoring
bash
browser-devtools-cli debug put-exceptionpoint --state uncaught browser-devtools-cli debug put-exceptionpoint --state all
DOM Mutation Monitoring
bash
browser-devtools-cli debug put-dompoint --selector "#content" --type subtree-modified browser-devtools-cli debug put-dompoint --selector "#element" --type attribute-modified browser-devtools-cli debug list-dompoints browser-devtools-cli debug clear-dompoints
Network Point Monitoring
bash
browser-devtools-cli debug put-netpoint --url-pattern "/api/*" browser-devtools-cli debug list-netpoints browser-devtools-cli debug clear-netpoints
Watch Expressions
bash
browser-devtools-cli debug add-watch --expression "this" browser-devtools-cli debug add-watch --expression "user.id" browser-devtools-cli debug list-watches browser-devtools-cli debug clear-watches
Retrieve Snapshots
bash
browser-devtools-cli --json debug get-tracepoint-snapshots browser-devtools-cli --json debug get-logpoint-snapshots browser-devtools-cli --json debug get-exceptionpoint-snapshots browser-devtools-cli --json debug get-dompoint-snapshots browser-devtools-cli --json debug get-netpoint-snapshots
Error Investigation
bash
browser-devtools-cli content take-screenshot --name "error-state" browser-devtools-cli content get-as-html --selector ".error-container"
Basic Debugging Workflow
- •Reproduce: Navigate to the problematic page
- •Capture: Take screenshot of current state
- •Inspect Console: Check for JavaScript errors
- •Analyze Network: Look for failed requests
- •Investigate: Run diagnostic JavaScript
- •Document: Summarize findings with evidence
bash
# Quick debug workflow browser-devtools-cli navigation go-to --url "https://example.com" browser-devtools-cli content take-screenshot --name "initial" browser-devtools-cli --json o11y get-console-messages --types error,warn browser-devtools-cli --json o11y get-http-requests --status-min 400
Advanced Debugging Workflow (Non-Blocking)
1. Set Up Probes
bash
SESSION="--session-id debug-session" # Navigate to app browser-devtools-cli $SESSION navigation go-to --url "http://localhost:3000" # Tracepoint on a function browser-devtools-cli $SESSION debug put-tracepoint \ --url-pattern "app.js" \ --line-number 42 # Exception monitoring browser-devtools-cli $SESSION debug put-exceptionpoint --state uncaught # Network monitoring browser-devtools-cli $SESSION debug put-netpoint --url-pattern "/api/*" # DOM mutation monitoring browser-devtools-cli $SESSION debug put-dompoint \ --selector "#dynamic-content" \ --type subtree-modified
2. Add Watch Expressions
bash
browser-devtools-cli $SESSION debug add-watch --expression "this" browser-devtools-cli $SESSION debug add-watch --expression "user.id"
3. Interact with Application
bash
browser-devtools-cli $SESSION interaction click --selector "#submit-btn" browser-devtools-cli $SESSION sync wait-for-network-idle
4. Retrieve Snapshots
bash
browser-devtools-cli $SESSION --json debug get-tracepoint-snapshots browser-devtools-cli $SESSION --json debug get-exceptionpoint-snapshots browser-devtools-cli $SESSION --json debug get-netpoint-snapshots browser-devtools-cli $SESSION --json debug get-dompoint-snapshots
5. Clean Up
bash
browser-devtools-cli $SESSION debug clear-tracepoints browser-devtools-cli $SESSION debug clear-watches browser-devtools-cli session delete debug-session
Probe Types Summary
| Probe | Purpose | Output |
|---|---|---|
| Tracepoint | Function calls | Stack, locals, watches |
| Logpoint | Expression values | Evaluated result |
| Exceptionpoint | Error catching | Error, stack trace |
| Dompoint | DOM mutations | Changed nodes |
| Netpoint | Network calls | Request/response |
Best Practices
- •Always check console for errors first
- •Filter network requests to relevant endpoints
- •Take screenshots before and after actions
- •Use source maps for minified/bundled code
- •Start with exceptions to catch errors first
- •Use logpoints for lightweight monitoring
- •Poll snapshots with
--from-sequencefor efficiency - •Clear probes when done to avoid overhead
- •Document reproduction steps clearly