Plumb

Plumb is a visual layout inspector for designers and frontend developers. Inspect spacing, dimensions, alignment, grids, and page structure directly on any webpage without digging through DevTools. Plumb turns layout information into clear visual overlays, helping you understand how interfaces are structured and measure them precisely. Element Inspector Inspect element width and height View X/Y position See display and positioning behavior Click to lock an element for closer inspection Box Model Visualize margins and padding Inspect individual top, right, bottom, and left values See content dimensions and box-sizing information Flexbox & Grid Detect Flexbox and CSS Grid automatically Inspect gap, row gap, and column gap View alignment and justification Inspect flex direction and wrapping Understand the parent layout controlling an element Distance Measurement Measure spacing between two elements View horizontal and vertical edge-to-edge distances Hold Option/Alt while hovering to compare elements quickly Pixel Ruler Measure any arbitrary distance on a webpage Drag between two points View X/Y delta and distance Hold Shift to constrain measurements horizontally or vertically Layout Guides Add configurable column grids Adjust column count and gutter width Set outer margins Add baseline guides Control overlay opacity Outline Mode Reveal the structure of an entire webpage Distinguish containers, text, media, forms, and interactive elements Keyboard Controls Navigate through parent, child, and sibling elements Quickly toggle Inspector and Outline modes Designed for focused inspection Plumb focuses exclusively on layout, geometry, spacing, and page structure. It does not include typography inspection, color extraction, or unrelated development tools. Privacy-first Plumb works locally in your browser. Page measurements and inspected content are not uploaded to a server, and no account is required. Built for designers, frontend developers, QA teams, and anyone who wants to understand webpage layouts visually.