Documentation

Getting started

1. Install the extension for Chrome or Firefox.
2. Open the popup on any page and enable the badge for that site.
3. On a site you haven't configured, the badge uses Detected (this site): it reads the page's own stylesheets and shows the breakpoints the site actually defines. You don't have to pick anything.
4. To pin a specific rule set instead, choose one from the dropdown (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. Your choice is remembered per site.
5. 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.

Detected breakpoints

Available from v0.6. Sites you haven't configured use this by default; sites where you've already picked a rule set keep your choice.

Rather than assuming a framework, the extension reads the page's own stylesheets and extracts the width boundaries its media queries actually define. That covers the common awkward cases: rules split across several stylesheets, em and remqueries, the modern range syntax (width >= 48rem), and the fractional max-widths frameworks emit (max-width: 767.98px), which are folded together with their min-width twins into a single boundary.

How tiers get their names

When a site's boundaries match a known framework, the tiers take that framework's names, so a Bootstrap site reads xs through xxl and a Tailwind site readsxs through 2xl. When a site defines its own breakpoints, there is no name to read (Sass variables and Tailwind config are compiled away long before the browser sees the CSS), so the tiers are numbered B1, B2,B3 in ascending order. Both forms appear indata-cbb-breakpoints, so parse names as opaque strings rather than assuming a framework's vocabulary.

A page with no width-based media queries at all shows a single unbounded tier named—. That is deliberate: the extension would rather say it found nothing than invent breakpoints the site does not have.

Snapshot, not a live feed

The map is read once per page and cached for that page's lifetime, so CSS injected later (by a framework that loads styles on demand, say) is not picked up automatically. Re-pickingDetected (this site) in the popup re-reads the page. Stylesheets the browser will not let the page read, such as cross-origin CSS served without CORS headers, cannot be parsed, so a map may be incomplete on sites that host CSS on a separate domain.

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.

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: "Detected (this site)",
//   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 "Detected (this site)"

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.