How do I install the Browser Debugger CLI skill?

Run npx skillmds@latest add jerseycheese/browser-debugger-cli in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Browser Debugger CLI safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Browser Debugger CLI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Browser Debugger CLI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Browser Debugger CLI?

jerseycheese (@jerseycheese) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Browser Debugger CLI by jerseycheese

Name: Browser Debugger CLI
Author: jerseycheese

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".

jerseycheese d798882 1.8 KB Updated Sep 17, 2026

File contents

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.

Frequently asked questions