Every feature, explained.

Hover any element for its margin, border, padding and content in DevTools' colours, with each size written in its band.

Select one element and hover another for the gaps between them, the insets inside, or how much they overlap.

Pin an element with Space, then hold Shift to measure from it to anything under the cursor.

Read values in the unit your design uses. Nothing is rounded before you see it.

Walk the DOM with Alt+Shift+arrows, and step through stacked elements with [ and ].

Pin several elements as floating cards to compare their sizes, spacing and type side by side.

Exact sizes and distances for elements under CSS transforms.

Names the constraint that decided an element's size: min-width, flex-basis, content or another.

Finds the overlay or rule that stops a click from landing.

Measure to the edges of shapes drawn inside pictures and canvas.

Measure between an element on the page and one inside a frame.

Rulers along the top and left in your unit, counting from the viewport, the document or the selection.

Drag guides from the rulers. They snap to edges and centres, take exact positions, and are there when you come back.

Flex items, gaps and grid tracks drawn on hover, the way DevTools draws them.

Outline every element at once to see the page's structure at a glance.

Save a set of guides as a file and share it with your team.

Lay your design's columns, gutters and margins over the page.

See where the page's media queries switch.

Several viewports side by side, scrolling together.

Lay a Figma frame or PNG over the build, see-through or as a difference.

Shows why one element sits on top of another, z-index by z-index.

Finds the element pushing the page wider than the screen.

A loupe up to 32× over the real pixels that names the CSS colour behind them and the token that holds it, in seven formats.

Measure text from its glyphs: cap height, x-height, baseline and descender, within half a pixel.

Every colour on the page, grouped, with where each is used.

Every type style on the page, rendered in its real font.

Flags spacing and colours that are off your design system's scale, and near-duplicates.

Spots text that did not render in the font you chose.

Every font size on the page against your type scale.

Check the selection or the whole page, worst first, and copy the nearest colour that passes.

Non-text contrast (WCAG 1.4.11) for icons, control borders and focus rings.

Text on photos and busy backgrounds, judged from the real pixels.

Contrast for hover, focus and disabled states, not just the default.

Draws the order keyboard users move through the page, and where focus is lost.

Finds targets smaller than 24 by 24 pixels (WCAG 2.5.8).

The page's structure as a screen reader announces it.

See the page as people with common colour-vision differences do.

A complete accessibility check of the page, powered by axe-core.

Every rule that applies, in cascade order, with layers, container queries and var() chains resolved.

Every resolved value for the selection, ready to copy.

Inspect inside closed shadow roots and same-origin frames.

See an element's other states without moving the mouse.

Highlight every match on the page and step through them.

Rules from CDN stylesheets in the cascade, read when you allow it.

Turn an element's styles into Tailwind classes, plain CSS or a JSX style object.

Box shadows split into layers, gradients into their stops.

Timing curves drawn out, with the CSS to copy.

A selector or test locator that survives the next build.

Screenshot an element, an area or the page, with measurements and a Markdown bug report.

Capture with one key, and export an element without its background.

Capture the whole page, then annotate it and hide what is private.

A component with every measurement drawn on, ready for a spec.

Meta and Open Graph tags, how the page looks when shared, and common SEO problems.

Every image, background and inline SVG, one by one or as a ZIP.

How much of the page is scripts, styles, images and fonts.

The frameworks and libraries a page is built with.

Size, context and dominant colours of canvas elements.

See what moved while the page loaded.

Edit the page's real rules as you type, and revert any change in one click.

Change styles for one breakpoint, state or pseudo-element only.

Cut, copy, paste, duplicate and delete elements on the page.

Rewrite page copy where it stands.

Drag padding, replace an image, undo and redo, right beside the element.

Add, remove and change utility classes with the result shown live.

Take your edits away as CSS or as a patch.

Jump from an element to its source in VS Code or Cursor.

Your edits come back when you return, stored in your browser.

Step aside to click and type on the page, keeping your selection, guides and rulers.

Keep dropdowns and hover states open while you measure them.

Change any key to suit your hands.

Nitpix in your language, English first.

The same checks, run in CI on every build.

Nitpix in Safari on the Mac.

Bring measurements and tokens into Figma.

Let AI coding agents measure, inspect and edit pages through Nitpix.

An AI review of a page against your design rules.

Compare a build with its Figma file, screen by screen.

Your guides and settings on every machine.

Leave comments pinned to elements, shared with your team.

File a bug with the capture and details in one click.

Send edits and copy changes to the team as a link.

Two versions of a page compared visually, with history.

A link to an audit anyone on the team can open.

Sign in with your company's identity provider.