Features point at things

Measure any element on a live web page

M Measure in the toolbar, free with no account

The box model drawn on the page itself. Margin, border and padding shaded separately, rulers running out to the edges of the viewport, and the measured size in the readout as you move.

Measure on a real page. Silent, 1.5MB, and nothing is fetched until you scroll to it.

What you get

Margin, border and padding, separately
Each shaded in its own tone over the element, in place, rather than as four numbers in a panel you have to map back onto the page.
Rulers to the viewport edge
So you can see what an element is aligned to, not just how big it is.
Sizes to a tenth of a pixel
Sub-pixel layout is real and rounding it hides the reason two things do not line up.
The inspection, in the same window
Matched selectors sorted by specificity with their layer and at-rule context, and anything the browser computed differently from the cascade.

How to use it

  1. Press Alt+Shift+P, then M.
  2. Hover anything. The box model is drawn where the element is.
  3. Click to lock it and read the full inspection.

What it will not do

Add to Chrome, free All thirteen tools

Next to this one