Specsray by Ronna

Specsray shows you a page's entire layout anatomy in one click. No hovering, no clicking elements one by one: every visible element gets annotated at once.

Five toggleable layers:

• Dimensions: every element outlined with its tag, class, and size in pixels
• Spacing: padding, margins, and borders tinted dev-tools style with their pixel values, plus border radius and grid track sizes
• Distances: red connector lines showing the gap between neighboring elements
• Fonts: family, size, weight, line height, letter spacing, and alignment on every text element
• Colors: background and text color swatches with hex codes

Flex and grid gaps are highlighted too, with their values. Toggle layers from the small control panel to keep things readable. Click the toolbar icon again to remove everything; the overlay never alters the page layout it measures.

No data collection. No external requests. Works only on the tab you activate it on.