Vibe Index
🎯

debugging

🎯Skill

from serkan-ozal/browser-devtools-skills

VibeIndex|
What it does

Debugs web web applications by inspconsoleecting messages,, tracing function and calls exceptions without breakingpoints. Human

πŸ“¦

Part of

serkan-ozal/browser-devtools-skills(9 items)

debugging

Installation

Quick InstallInstall with npx
npx skills add serkan-ozal/browser-devtools-skills
npm installInstall npm package
npm install -g browser-devtools-mcp
πŸ“– Extracted from docs: serkan-ozal/browser-devtools-skills
Need more details? View full documentation on GitHub β†’
3Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

Debug web applications using console inspection, network analysis, and non-blocking code debugging. Use when the user reports bugs, wants to debug JavaScript, inspect network requests, troubleshoot page issues, trace function calls, or monitor exceptions.

Overview

# 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

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

  1. Reproduce: Navigate to the problematic page
  2. Capture: Take screenshot of current state
  3. Inspect Console: Check for JavaScript errors
  4. Analyze Network: Look for failed requests
  5. Investigate: Run diagnostic JavaScript
  6. 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

  1. Always check console for errors first
  2. Filter network requests to relevant endpoints
  3. Take screenshots before and after actions
  4. Use source maps for minified/bundled code
  5. Start with exceptions to catch errors first
  6. Use logpoints for lightweight monitoring
  7. Poll snapshots with --from-sequence for efficiency
  8. Clear probes when done to avoid overhead
  9. Document reproduction steps clearly

More from this repository8

🎯
browser-devtools-cli🎯Skill

Automates web browser interactions using Playwright for testing, debugging, and extracting content via a powerful CLI tool.

🎯
browser-testing🎯Skill

Automates browser testing by navigating, interacting with web pages, filling forms, capturing content, and verifying UI behaviors using Browser DevTools CLI.

🎯
observability🎯Skill

Enables comprehensive web application monitoring by tracking distributed traces, console logs, network requests, and performance metrics across frontend and backend services.

🎯
visual-testing🎯Skill

Validates and compares web page visual rendering across different browsers and configurations using automated screenshot comparison techniques.

🎯
react-debugging🎯Skill

Inspects and maps React components to DOM elements, helping developers quickly diagnose rendering issues and component interactions.

🎯
performance-audit🎯Skill

Performs comprehensive web page performance analysis using Web Vitals, network metrics, and SEO performance indicators.

🎯
accessibility-audit🎯Skill

Performs comprehensive web accessibility audits using ARIA snapshots, AX tree analysis, and WCAG validation checks.

🎯
api-testing🎯Skill

Mocks and tests API integrations by simulating responses, intercepting requests, and monitoring network traffic.