Browser debugger cli

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

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".From its SKILL.md

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.

2 things 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.
runs commandsInstructs the agent to run 7 commands, including `bdg http://localhost:3000` and 6 more.

SKILL.md

1.8 KB, 326 tokens by cl100k_base, 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

Start a session:
- bdg http://localhost:3000
Query DOM:
- bdg dom query "button"
- bdg dom query "[data-testid='x']"
Discover CDP methods:
- bdg cdp --list
- bdg cdp --search dom
Evaluate JS:
- bdg cdp Runtime.evaluate --params '{"expression":"document.title"}'
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.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most debug triage skills give in 326 tokens

Counted across 1,020 of the 1,639 authors here whose files we hold, read 2026-09-06

Find root cause before attempting any fixin 134 of 1020, across 118 files
Create a failing test case before implementing a fixin 109 of 1020, across 95 files
Read error messages and stack traces completelyin 102 of 1020, across 88 files
Reproduce the issue consistently before investigatingin 90 of 1020, across 77 files
Make the smallest possible change to test a hypothesisin 90 of 1020, across 76 files
Trace data flow backward to find the sourcein 84 of 1020, across 70 files
Form a single hypothesis before testingin 78 of 1020, across 64 files
Implement only one fix at a timein 76 of 1020, across 63 files
Question the architecture if three fixes failin 73 of 1020, across 59 files
Add diagnostic instrumentation at component boundariesin 68 of 1020, across 56 files
Compare broken code against working examplesin 68 of 1020, across 57 files
Write a regression test before applying the fixin 62 of 1020, across 55 files

Said here and by no other author read

Start a session with the target URL
Query DOM elements using the CLI
List available CDP methods
Evaluate JavaScript using CDP methods
Use no-headless mode for visible browser windows
Float browser windows in tiling window managers

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.