Inspect Mode

Inspect mode is the default mode in Calipers. When active, hovering over any element

on the page reveals its exact width and height in a floating dimension label.

How it works

Activate Calipers (⌘⇧M) — Inspect mode starts automatically.

Hover over any element on the page.

A glassmorphic label appears showing width × height in pixels.

Click the label to copy the measurement to your clipboard.

Box Model Overlay

Press B (or toggle in the popup) to enable the box model overlay. This adds

colour-coded layers showing:

• Content — the element's content box (blue)
• Padding — padding area (green)
• Border — border area (amber)
• Margin — margin area (coral)

Values are read from window.getComputedStyle(), so they reflect the actual

rendered layout — not the CSS source values.