v0.12.0

dom inspect went through a deep review: 9 agents worked through design-QA tasks on real sites (GitHub, Stripe, Wikipedia, Tailwind, Bootstrap, BBC/Guardian, Shoelace, MUI) and checked bdg against screenshots. Everything they found is fixed. A retest with the same tasks raised the agents' trust in bdg's output without a screenshot from 7.4 to 7.9 out of 10, and cut their dom eval fallbacks from about 10 to 6 per task.

New

• bdg dom audit [contrast|overflow|layers|animations]: page-wide checks without screenshots or dom eval. It reports:
  • text below WCAG AA/AAA, weakest first;
  • what makes the page scroll sideways;
  • cut-off text;
  • upscaled or distorted images;
  • fixed and sticky layers;
  • running animations.
• bdg css search <text>: finds a text in every stylesheet of the page, cross-origin ones included, and shows the rule and its file:line.
• --mobile (at start, or bdg page emulate --mobile): emulates a phone. That means a mobile viewport with overlay scrollbars, pixel ratio 3, touch (pointer: coarse) and an Android Chrome user agent.
• bdg dom hover --off: moves the mouse off the page, which closes menus that open on hover.
• dom screenshot --padding <px>: adds page around an element capture.

dom inspect is more accurate

• Text styles come from the element that draws the text (text in abbr, slotted text in web components). This used to hide contrast failures.
• Contrast is composited the way the browser does it. A translucent ancestor fades its own background too. The output says when the ratio is approximate (≈): blend modes, filters, a canvas behind the text, overlays.
• --why and --rules cover every shorthand and inherited property. That includes transition, outline and background-position, inherited properties like caret-color, and @property with inherits: false.
• A web font the page loaded is no longer reported as a fallback.
• Better cover and visibility badges: sticky headers, shadow DOM, overlays, inline lists of floats, and fixed elements.
• Fewer false "has no effect" hints. An unset variable now says where the page sets it (.btn:hover, @keyframes).
• Output fixes:
  • units kept in calc();
  • each background layer listed with its own size and position;
  • SVG fill/stroke;
  • a truncated flag;
  • tree markers for shadow roots, slots and display: contents;
  • --why lists @media rules that don't apply now;
  • dom inspect "a::after" works.
• Element screenshots include shadows, focus rings and text overflow. Tall elements no longer shift by half a scrollbar, and the page scroll is restored after the capture.

Changed behaviour

• dom screenshot --selector X --index N picks that match. It used to exit 81.
• dom wait with no arguments waits for the page to load.
• The dom inspect text line always names the background in its contrast (on #fff) and marks approximate ratios with ≈.

Install

npm install -g browser-debugger-cli

Full list in the CHANGELOG. Compare: v0.11.0...v0.12.0