Skip to content
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

diagnostic · one of 39 Pro exports the matrix

Breakpoints

What breaks at the widths this page actually declares?

A device list is somebody else's guess about where a layout changes. The widths that matter are the ones the page declares itself, and this reads them out of its media queries and loads the page at each - a real frame at a real size, because a preview scaled down fires no media query and shows the desktop layout small rather than the mobile layout at all.

Reach it Press ⌘ + K on any tab and type breakpoints. Ctrl + K on Windows and Linux

The page measured at every width its own stylesheets declare
reads the page's own media queries
loads one offscreen frame per width
counts overflow, unreadable type, small targets
measures a min-width one pixel below itself
sends nothing
plan pro
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

in the panel · this one is Pro

section#about

What this actually is

After a layout change, and before a release that touches anything responsive. A min-width is measured one pixel below itself as well, which is the last width the rule before it is responsible for and the one nobody ever looks at.

section#asked

Asked about this diagnostic

Why not just use the responsive preview?

The preview is for looking. This is for counting: it loads the page at each declared width and reports what fails at each, which is a table you can act on rather than a set of frames you have to inspect one at a time.

Why is it the slowest tool in the panel?

Because every width is a real page load. Scaling one document down would be instant and would also be wrong - no media query fires, so you would be measuring the desktop layout at a small size.

What if the page declares no widths?

Then it says so rather than inventing a device list. A page with no width-based media query has no breakpoints to measure, and reporting three anyway would be reporting our opinion of where they should be.

how to use breakpoints

  1. Open Breakpoints. The widths are read from the page's own media queries, not from a device list.
  2. Wait for the matrix: each width is a separate load, so this is the slowest reading in the panel.
  3. Read across a row to see which widths a problem survives, rather than down a single column.
  4. Point at a count to see what produced it - overflow, small type, or an undersized target.
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

75 of these · no host permissions · three free audits