Browser debugger CLI skill (bdg) https://github.com/szymdzum/browser-debugger-cli

SKILL.md

name	description
browser-debugger	Control Chrome browser for debugging, testing, and automation using the browser-debugger-cli (bdg) tool. Use this skill when you need to interact with web pages, capture screenshots, inspect DOM elements, monitor network requests, or automate browser tasks.

Browser Debugger CLI (bdg) Skill

Use this skill to control Chrome browser sessions for debugging, testing, and web automation.

Prerequisites

• Chrome/Chromium must be installed
• bdg CLI installed globally: npm install -g browser-debugger-cli@alpha

Session Lifecycle

Start a Session

# Start with URL
bdg <url>

# Examples
bdg localhost:3000           # Local dev server
bdg https://example.com      # Full URL
bdg example.com              # Auto-prepends http://

Options:

• --port <number> - CDP port (default: 9222)
• --timeout <seconds> - Connection timeout in seconds (valid range: 1-3600)
• --headless - Run Chrome in headless mode
• --no-wait - Don't wait for page load
• --compact - Minimal output
• --all - Include all resources

Check Status

bdg status              # Basic session status
bdg status --verbose    # Includes Chrome diagnostics
bdg status --json       # JSON output format

Stop Session

bdg stop                # Terminates the session
bdg stop --kill-chrome  # Also terminates Chrome process

Cleanup

bdg cleanup             # Removes stale files
bdg cleanup --force     # Forces cleanup even if active
bdg cleanup --aggressive # Terminates all Chrome processes
bdg cleanup --all       # Removes session.json as well

DOM Commands

Query Elements

bdg dom query "button"      # Find all buttons
bdg dom query ".error"      # By CSS class
bdg dom query "#app"        # By ID
bdg dom query --json        # JSON output

Get Element Details

bdg dom get "button"            # Semantic output (token-efficient)
bdg dom get "button" --raw      # Full HTML output
bdg dom get "button" --raw --all # All matches with HTML
bdg dom get 0                   # By cached index from previous query

Element Interaction

bdg dom fill "#username" "admin"    # Fill input fields
bdg dom click "#login-btn"          # Click elements
bdg dom pressKey "input" Enter      # Press keyboard keys
bdg dom submit "#login-form"        # Submit forms

Screenshots

bdg dom screenshot output.png                           # Full page
bdg dom screenshot visible.png --no-full-page           # Visible viewport only
bdg dom screenshot hq.jpg --format jpeg --quality 100   # Custom quality

JavaScript Evaluation

bdg dom eval "document.title"                    # Execute JS expression
bdg dom eval "document.querySelectorAll('a').length"

Accessibility Commands

bdg dom a11y tree                           # View accessibility tree (first 50 nodes)
bdg dom a11y query role=button              # Query by ARIA role
bdg dom a11y query name="Submit"            # Query by accessible name
bdg dom a11y describe "button[type=submit]" # Element accessibility details

Network Commands

bdg network har                 # Export HAR file
bdg network headers             # Main page headers
bdg network getCookies          # Retrieve cookies

Console Commands

bdg console              # Smart summary of current page
bdg console --history    # All navigations history
bdg console --list       # Chronological message listing
bdg console --follow     # Real-time streaming

Monitoring Commands

Peek (Snapshot)

bdg peek                     # Last 10 items
bdg peek --last 50           # Custom item limit
bdg peek --network           # Network resources only
bdg peek --type Document,XHR # Filter by resource type

Tail (Live Updates)

bdg tail                    # Live stream updates
bdg tail --network          # Network activity only
bdg tail --interval 2000    # Custom interval (ms)

CDP (Chrome DevTools Protocol)

Protocol Introspection

bdg cdp --list                          # Lists all 53 domains
bdg cdp Network --list                  # Lists methods in domain
bdg cdp --search cookie                 # Keyword search
bdg cdp Network.getCookies --describe   # Method details

Execute CDP Methods

bdg cdp Network.getCookies                                          # No params
bdg cdp Runtime.evaluate --params '{"expression":"document.title"}' # With params

Common Workflows

Debug a Local App

# Start session
bdg localhost:3000

# Take screenshot
bdg dom screenshot before.png

# Check for errors
bdg console --list

# Interact with elements
bdg dom fill "#email" "test@example.com"
bdg dom click "#submit"

# Verify result
bdg dom screenshot after.png

# Stop when done
bdg stop

Monitor Network Activity

bdg https://example.com
bdg tail --network    # Watch live network requests
# Ctrl+C to stop
bdg network har       # Export full network log

Test Form Submission

bdg localhost:3000/login
bdg dom fill "#username" "admin"
bdg dom fill "#password" "secret"
bdg dom click "button[type=submit]"
bdg dom screenshot result.png
bdg console --list    # Check for errors

Global Options

• --json - JSON output format (useful for parsing)
• --help - Display help information
• --version - Show version number

Tips

1. Always start with bdg <url> before running other commands
2. Use bdg status to check if a session is active
3. Use bdg stop when done to clean up resources
4. Screenshots are saved to current working directory
5. Use --json flag when you need to parse output programmatically
6. Use bdg dom get for token-efficient element inspection (70-99% reduction vs raw HTML)