agentsclimarketplace

Browser debugger cli

Skill jerseycheese/agent-skills/skills/browser-debugger-cli

Agent skills for Claude Code, Codex, and Gemini CLI — shared workflows for testing, code review, issue triage, and dev loop automation.

Install
npx -y skills add jerseycheese/agent-skills --skill browser-debugger-cli

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Inspect and debug live web pages using the Chrome DevTools Protocol via the `bdg` CLI. Use for targeted DOM queries, computed style checks, layout debugging, and CDP method calls without loading a full page snapshot. Prefer over chrome-devtools-mcp for token efficiency. Trigger on: "inspect element", "check computed styles", "query the DOM", "what does the DOM look like", "debug layout", "check the CSS on", "run a DevTools query", "what's the rendered style of", "inspect the page".

SKILL.md

1.8 KB, as published. Nobody here has run it

browser-debugger-cli (bdg)

When to use

  • Query specific DOM elements or attributes
  • Run targeted CDP methods without full page snapshots
  • Debug with minimal token overhead

Prerequisites

  • Install: npm install -g browser-debugger-cli@alpha
  • Chrome available locally, or connect via --chrome-ws-url

Common workflow

  1. Start a session:
    • bdg http://localhost:3000
  2. Query DOM:
    • bdg dom query "button"
    • bdg dom query "[data-testid='x']"
  3. Discover CDP methods:
    • bdg cdp --list
    • bdg cdp --search dom
  4. Evaluate JS:
    • bdg cdp Runtime.evaluate --params '{"expression":"document.title"}'
  5. Stop the session:
    • bdg stop

Notes

  • Use bdg status or bdg peek to inspect without stopping.
  • Use bdg --no-headless when you need a visible browser window.
  • macOS tiling window managers: When using --no-headless, tiling window managers (AeroSpace, yabai, Amethyst, etc.) will constrain the browser window's viewport to whatever space the layout assigns. Float the window after it appears using the WM's float command. Without this, viewport-dependent CSS (media queries, responsive layouts) may not match expected breakpoints.
  • For full page snapshots or complex automation, use Chrome DevTools MCP.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.