v0.10.0

bdg 0.10.0 lets an agent see what an element looks like, and why, without a screenshot.

bdg dom inspect reports an element's styles the way Figma's Dev Mode shows them. With the CSS cascade it explains them: which rule sets each value, what that rule beats, and which declarations have no effect.

We tested it the same way as 0.9.0. Four agents that had never seen bdg worked through the same styling tasks in three rounds:

• a broken dashboard with four CSS bugs;
• "why is Bootstrap's button blue";
• Tailwind's responsive heading;
• an audit of MDN's search box.

Not one of them took a screenshot. Each found dom inspect through --help, and their ratings went from 8/8/8/7 to 9/8/9/8.

Highlights

• bdg dom inspect <selector> shows the element's styles in about 60–100 tokens, grouped like Figma Dev Mode:

  • box (margin, padding, borders);
  • layout (display, flex/grid, position, the parent's layout, and the distances to its edges and siblings);
  • text: the declared font and the one Chrome actually rendered, size and line height, color, and WCAG contrast against the real background;
  • fill, border, effects, state, ::before/::after/::placeholder;
  • a compact child tree.

  Colors are hex (Tailwind's oklch()/lab() converted), and --json uses Figma's names.

• Hints: declarations that have no effect are flagged by default, with the reason, the fix and the rule's file and line:

  hints  justify-content: space-between has no effect: display is block → use display: flex or grid on this element · in .topbar (app.css:4)
  

  This covers flex/grid properties without flex or grid, offsets and z-index on static elements, sizes on inline elements, var() of a custom property that isn't set (did you mean --brand?), form controls that don't inherit the page font, and more.

• --rules names the rule that sets each shown property. --why <property> lists every declaration of one property, the winner first, with:

  • selector specificity;
  • media conditions and cascade layers;
  • var() values substituted;
  • where each custom property is set, up to :root;
  • a warning when a transition is still running.

  why    background-color = #9db8ff
           ✓ background: #9db8ff  .card .btn (app.css:18) [0,2,0]
           ✗ background: #4f8cff  .btn-primary (app.css:17) [0,1,0]
  

• bdg page emulate --viewport 900x700 or --color-scheme light changes the viewport or color scheme mid-session, for responsive and theme checks. --reset clears both.

• Checking a page against a Figma design: a recipe that combines the Figma MCP server with dom inspect --json --rules. It covers the field mapping, tolerances, and "right value, wrong token" checks.

• Clearer errors:

  • bdg cdp exits 81 for wrong parameters and 83 for a missing node, target or frame, instead of 110;
  • a selector that tries to cross into a shadow root names the selector that works.

• Also:

  • dom listeners resolves Preact handlers;
  • dom query shows the attributes that identify an element;
  • network list has a START column;
  • element screenshots of centered content are no longer shifted;
  • smoke tests no longer open the system mail app.

Behavior changes

The JSON envelope is unchanged. What scripts may notice:

• bdg cdp: errors Chrome reports for the call now exit 81 or 83 instead of 110.
• bdg status: the emulation is labelled (emulated 1280x800) / (emulated), since it may now come from page emulate.

The full list is in the CHANGELOG.

Install

npm install -g browser-debugger-cli

Full changes: v0.9.0...v0.10.0