Calipers

Inspect Mode

Inspect mode is the default when you activate Calipers. Hover over any element to see its exact rendered size and supporting context — without opening DevTools.

How it works

  1. Activate Calipers (Cmd+Shift+M).
  2. Hover over any element on the page.
  3. A dimension label shows width × height in pixels.
  4. Click the label to copy the measurement.

What you see

  • Dimensions — rendered width and height from getBoundingClientRect()
  • Element path — CSS selector breadcrumb (tag, id, and up to two classes per level)
  • Typography — font family, size, weight, line-height, and letter-spacing on text nodes
  • Viewport distances — dashed lines from element edges to the viewport edges with pixel labels
  • Box model rings — when enabled, colour-coded margin, padding, border, and content layers

Box model detail panel

Click any element to open the detail panel with exact computed values for margin, padding, border, and content on each side.

Toggle the overlay rings with B or the Box model toggle in the control panel. See Box Model Overlay for colour coding details.

Rulers

Enable Rulers in the control panel to show pixel rulers along the viewport edges with a cursor crosshair — useful for checking alignment against the viewport grid.