Layout Buddy – CSS Inspector & Screen Ruler

Inspect CSS, measure spacing, test responsive layouts, and annotate screenshots—right on any webpage.

Layout Buddy helps you inspect and review webpages without opening DevTools. Hover over any element to see its size, spacing, layout, typography, colors, and visual effects. Click to freeze it, copy values, or measure the distance to another element. With Layout Buddy, you can: • Inspect CSS visually • Measure padding, gaps, and element distances • Preview Phone, Tablet, and Desktop layouts side by side • Reveal page structure with X-Ray mode • Capture a page or selected area • Add arrows, rectangles, and text to screenshots • Save QA notes with element and viewport context Everything runs locally in your browser. No account, analytics, or content uploads. Built for frontend developers, designers, and QA engineers. Layout Buddy works on regular HTTP and HTTPS webpages. Browser-internal pages, extension pages, and the Chrome Web Store cannot be inspected.