How this site's Inspect mode works

Press I on any page of this site and it turns into a small version of browser DevTools. Hover an element to see its margin, border, padding and content boxes. Click to pin it and read its type style, colours and spacing, named by design token where one matches.

Drawing the box model

Every element gives you two things that are enough to draw the classic four-colour overlay:

• getBoundingClientRect() returns the border box in viewport coordinates.
• getComputedStyle() returns the resolved margin, border width and padding on each side.

The margin box is the border box grown by the margins. The padding box is the border box shrunk by the border widths. The content box is the padding box shrunk by the padding. Four fixed-position divs, one per layer, are enough. They sit in their own layer with pointer-events: none, so the page underneath never reflows.

const r = el.getBoundingClientRect();
const s = getComputedStyle(el);
const pad = parseFloat(s.paddingTop); // 24

Naming values as tokens

A computed colour comes back as rgb(196, 20, 92), not as --probe. To name it, the script reads every custom property declared on :root, resolves each colour through a hidden element, and builds a map from the resolved rgb() string to the token name. Spacing and radius tokens map from their pixel values. Type styles match on font size and weight.

Keeping it honest

• Inspect mode starts off on every new visit, so the default page stays calm.
• With reduced motion turned on, the overlay appears without fading.
• The inspect panel shows this page’s own Web Vitals, measured live with PerformanceObserver.

More posts will follow as I learn things worth writing down.