Element dimensions
Hover or lock an element to see its exact width, height and page position without opening DevTools.
Built for designers & frontend developers
See the layout behind every page.
Plumb is a visual layout inspector for Chrome. Measure elements, reveal spacing, inspect Flexbox and Grid, compare distances, and overlay your own layout guides — directly on the webpage.
Coming soon to the Chrome Web Store · Local-first · No account required
div.hero-card303 × 194 px
Layout
Selected element
Selected element
Displayflex
Gap24 px
Aligncenter
Positionrelative
What Plumb reveals
Everything you need to understand page geometry.
Plumb keeps typography and color out of the way and concentrates on the part that is hardest to eyeball: structure, spacing, alignment and measurement.
Margin & padding
Reveal the full box model with visual layers and top, right, bottom and left values.
Flexbox & Grid
Detect layout systems automatically, including gaps, direction, wrapping and alignment behavior.
Distance measurement
Lock one element and compare another to see exact horizontal and vertical spacing between them.
Pixel ruler
Drag between any two points on a webpage. Snap horizontally or vertically for precise measurements.
Layout guides
Overlay columns, gutters, margins and baseline grids to compare an implementation against a layout system.
Outline mode
Reveal the page structure at a glance by outlining containers, text, media and interactive elements.
DOM navigation
Move through parents, children and siblings from the keyboard while keeping the current element locked.
On-page controls
A compact floating toolbar keeps the tools close without turning the webpage into another developer console.
Inspect precisely
Measure the design, not just the DOM.
Plumb translates CSS geometry into visual information you can understand immediately.
See the box model directly.
Inspect the space around and inside an element with distinct visual layers. No hunting through computed styles.
✓Content dimensions and box sizing
✓Margin and padding on every side
✓Display, position and layout context
MARGIN · 32 / 24 / 32 / 24
BORDER
PADDING · 24
428 × 264 px
88 px64 px267 px · 13°
Compare anything to anything.
Measure element-to-element spacing or switch to the freeform Pixel Ruler when you need an arbitrary distance.
✓Horizontal and vertical edge distances
✓Freeform point-to-point measurement
✓Shift snapping and adjustable endpoints
Overlay your system
Bring your grid onto the live website.
Configure a layout system once and keep it visible while you inspect the implementation underneath it.
Columns, gutters and baselines.
Check whether a page actually follows the system it was designed around.
✓1–24 configurable columns
✓Custom gutters and outer margins
✓Adjustable baseline spacing and opacity
Check the implementation against the system.
Made for real workflows
Useful when you design. Useful when you build.
For designers
Audit implementation spacing, compare live interfaces with design systems, and inspect layouts without reading CSS.
For frontend developers
Debug dimensions, gaps, alignment and parent layout behavior without constantly switching into DevTools.
For QA & handoff
Make visual layout checks faster and communicate spacing problems with exact pixel values instead of screenshots and guesses.
Plumb is coming soon.
Chrome release is being prepared. The final 1.0 extension is already built.