skills.rest
szymdzum
szymdzumCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bdg-browser-debug

Diagnose browser and Astro dev server issues via Chrome DevTools Protocol.

1|Updated Sep 12, 2025
One-click install
npx skills add https://github.com/szymdzum/kumak-dev --skill bdg-browser-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bdg-browser-debug
Source: https://github.com/szymdzum/kumak-dev/tree/main/.claude/skills/bdg
Command: npx skills add https://github.com/szymdzum/kumak-dev --skill bdg-browser-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides browser debugging and telemetry via the Chrome DevTools Protocol to streamline testing of the Astro dev server, inspect network activity, catch console errors, capture screenshots, and interact with DOM elements on localhost:4321.

Core Features & Use Cases

  • Telemetry & Debugging: Access CDP to inspect network requests, console logs, and DOM state during local development.
  • Session-Based Testing: Start and manage debugging sessions to reproduce issues on localhost:4321.
  • Output & Artifacts: Capture screenshots and extract live telemetry for analysis.

Quick Start

Start a debugging session against your dev server with the command: bdg http://localhost:4321/ Check status with: bdg status Preview collected data with: bdg peek Stop and save the session with: bdg stop

Frequently Asked Questions about bdg-browser-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug an Astro dev server using Chrome DevTools Protocol?▼

Chrome DevTools Protocol debugging for Astro connects to your localhost:4321 dev server to inspect network requests, console logs, and DOM state in real time. Start a session with `bdg http://localhost:4321/`, then use `bdg peek` to preview collected telemetry data.

Can I capture screenshots and inspect network activity during local Astro development?▼

Yes. The skill captures screenshots and extracts live network telemetry through CDP during localhost development sessions. Collect data with an active session, then export in quiet or JSON format for analysis.

What's the workflow for debugging console errors and DOM interactions on localhost:4321?▼

Start a debugging session against your Astro dev server with `bdg http://localhost:4321/`, inspect console errors and DOM state via CDP telemetry, preview results with `bdg peek`, and save the session with `bdg stop` for further analysis.

Does browser debugging via Chrome DevTools Protocol work with local Astro development?▼

Yes. The skill is designed specifically for Astro dev server debugging on localhost:4321, supporting session-based testing, network inspection, console error capture, DOM interaction, and screenshot extraction through CDP access.

How do I manage and review debugging sessions for my Astro dev server?▼

Use `bdg status` to check an active debugging session, `bdg peek` to preview collected CDP telemetry without stopping, and `bdg stop` to end the session and save data in your chosen output format.

What output formats are available for debugging data collected from localhost?▼

Collected telemetry supports configurable output modes including quiet mode for minimal logging and JSON formatting for structured data export and programmatic analysis.

Related Skills

tense-itense-i
1

browser

Control Chrome via CDP to navigate, evaluate scripts, and capture screenshots.

Community
Intermediate
stevengonsalvezstevengonsalvez
2

debug-bridge

Control and inspect web applications via a WebSocket bridge for debugging and automated testing.

Community
Advanced
SriRamkunamsettySriRamkunamsetty

node-inspect-debugger

Attach to Node.js processes via V8 inspector and CDP for debugging.

Community
Advanced
cyalcalacyalcala
1

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools MCP.

Community
Intermediate