Documentation
Getting started
- Install the extension for Chrome or Firefox.
- Open the popup on any page and enable the badge for that site.
- Pick a rule set (Bootstrap and Tailwind come prepackaged) or create your own: name each breakpoint, set its max width, and pick a color per tier. The scale preview updates as you type.
- The badge shows the active breakpoint and viewport width, colored to match the tier. Drag it anywhere, or park it in a corner. Settings are per-site.
Machine-readable breakpoint state
Available from v0.5. While the badge is enabled for a site, the extension publishes the active breakpoint as structured state, so scripts, browser-automation tools, and AI agents can read it instead of inspecting the badge visually.
Attributes on <html>
All values follow the badge's active rule set.
| Attribute | Meaning |
|---|---|
data-cbb-breakpoint | Active breakpoint name (e.g. MD). |
data-cbb-rule | Rule set name: Bootstrap, Tailwind, or a custom rule set’s name. |
data-cbb-width | Viewport width in px. |
data-cbb-min-width | The active breakpoint’s lower bound (inclusive). |
data-cbb-max-width | The active breakpoint’s upper bound (exclusive). Absent for the unbounded largest breakpoint. |
data-cbb-breakpoints | JSON array of the full breakpoint map: [{"name":"XS","minWidth":0,"maxWidth":576}, …] where maxWidth: null means unbounded. |
The window.__cssBreakpoint global
A frozen object in the page context with the same data, for page scripts and automation running in the main world:
window.__cssBreakpoint
// {
// breakpoint: "SM",
// rule: "Bootstrap",
// width: 700,
// minWidth: 576,
// maxWidth: 768,
// breakpoints: [{ name: "XS", minWidth: 0, maxWidth: 576 }, …]
// }Console log on change
One line is logged each time the named breakpoint changes:
[css-breakpoint] SM (≥576px, <768px) at 700px — rule set "Bootstrap"Reading it from automation
Any tool that can evaluate JavaScript or read the DOM can use the state, whether that's a DevTools console, Playwright, or an agent's browser session:
// Which breakpoint is this viewport in, really?
const bp = document.documentElement.dataset.cbbBreakpoint;
// Full map: test each boundary instead of guessing widths
const map = JSON.parse(
document.documentElement.dataset.cbbBreakpoints
);
for (const { name, minWidth } of map) {
// resize to minWidth - 1 and minWidth, screenshot both …
}When the badge is disabled
None of this is present: the attributes and the global are removed, and nothing is logged. The state exists only on sites where you've enabled the badge.