Agent skill
bdg-browser-debug
Browser debugging and telemetry via Chrome DevTools Protocol. Use when testing the Astro dev server, inspecting network requests, debugging console errors, capturing screenshots, or interacting with DOM elements on localhost:4321.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/bdg-browser-debug
SKILL.md
bdg - Browser Debug Gateway
Browser telemetry via Chrome DevTools Protocol for testing the Astro dev server.
Quick Start
bash
# Start session on Astro dev server
bdg http://localhost:4321/
# Check status
bdg status
# Preview collected data
bdg peek
# Stop and save session
bdg stop
Session Management
| Command | Description |
|---|---|
bdg http://localhost:4321/ |
Start session on dev server |
bdg status |
Show session status |
bdg stop |
Stop and save to ~/.bdg/session.json |
bdg stop --kill-chrome |
Stop and close Chrome |
bdg cleanup |
Clean stale sessions |
bdg cleanup --aggressive |
Force kill all Chrome instances |
Data Inspection
Peek (non-destructive preview)
bash
bdg peek # Summary of all data
bdg peek -n # Network requests only
bdg peek -c # Console messages only
bdg peek -d # DOM/A11y tree
bdg peek -f # Follow mode (like tail -f)
bdg peek --last 20 # Last 20 items
bdg peek -j # JSON output
Network
bash
bdg network list # List all requests
bdg network list --failed # Failed requests only
bdg network list --type XHR # Filter by type
bdg network headers # Main document headers
bdg network headers <id> # Specific request headers
bdg network getCookies # List cookies
bdg network har # Export as HAR file
Console
bash
bdg console -l # List all messages
bdg console --level error # Errors only
bdg console --level warning # Warnings only
bdg console -f # Follow in real-time
bdg console --last 50 # Last 50 messages
Details
bash
bdg details request <id> # Full request details
bdg details console <id> # Full console message
DOM Interaction
Inspection
bash
bdg dom a11y # Accessibility tree
bdg dom a11y "button" # Search a11y tree
bdg dom query "nav a" # CSS selector query
bdg dom get "header" # Get element structure
bdg dom get "article" --raw # Get raw HTML
Actions
bash
bdg dom click "button.submit" # Click element
bdg dom fill "input[name=email]" "test" # Fill input
bdg dom submit "form" # Submit form
bdg dom pressKey "input" "Enter" # Press key
bdg dom eval "document.title" # Evaluate JS
Screenshots
bash
bdg dom screenshot ./shot.png # Full page
bdg dom screenshot ./el.png -s "header" # Element only
CDP Protocol Access
bash
bdg cdp --list # List 53 domains
bdg cdp --search cookie # Search methods
bdg cdp --describe Network.getCookies # Method details
bdg cdp Network.getCookies # Execute CDP method
Common Workflows
Test page load performance
bash
bdg http://localhost:4321/
# Browse the site...
bdg peek -n # Check network requests
bdg network list --failed # Any failed requests?
bdg stop
Debug console errors
bash
bdg http://localhost:4321/
bdg console --level error # Check for errors
bdg console -f # Monitor in real-time
Inspect accessibility
bash
bdg http://localhost:4321/
bdg dom a11y # Full a11y tree
bdg dom a11y "navigation" # Find nav elements
Capture visual state
bash
bdg http://localhost:4321/
bdg dom screenshot ./screenshots/home.png
bdg dom screenshot ./screenshots/header.png -s "header"
Options Reference
| Flag | Description |
|---|---|
-q, --quiet |
Minimal output for AI agents |
-j, --json |
JSON output (most commands) |
--headless |
No visible browser window |
-t, --timeout <s> |
Auto-stop after N seconds |
-p, --port <n> |
Chrome debug port (default: 9222) |
--debug |
Verbose logging |
Output Files
- Session data:
~/.bdg/session.json - Chrome profile:
~/.bdg/chrome-profile/
Didn't find tool you were looking for?