Specsray - see spacing, gaps & fonts

One click overlays every element's measurements at once: sizes, padding, margins, gaps, fonts, and colors. No hovering needed.

Specsray shows you a page's entire layout anatomy in one click. No hovering, no picking elements one at a time: every visible element gets annotated at once, like an x-ray of the page. Click the toolbar icon and Specsray overlays the current tab with all of its measurements. Click again and everything disappears. A small control panel lets you toggle five layers independently, so you only see what you need: DIMENSIONS Every element outlined with its tag, class, and exact size in pixels. SPACING (BOX MODEL) Padding, margins, and borders tinted dev-tools style, each side labeled with its pixel value. Includes border radius labels, flex and grid gap highlighting with values, and grid track sizes. DISTANCES Connector lines showing the pixel distance between neighboring elements, the plain layout space that isn't padding, margin, or gap. FONTS Family, size, weight, line height, letter spacing, alignment, and transform on every text element. COLORS Background and text color swatches with hex codes. WHY SPECSRAY - Everything at once: see the whole page's spacing rhythm in a single glance instead of inspecting elements one by one - Layout-neutral: the overlay never changes the page's geometry, so the numbers you read are the numbers the page really has - No setup: works on any normal webpage with zero configuration - Honest labeling: every nonzero value gets its number, even one-pixel borders PRIVACY Specsray collects no data, makes no network requests, and only runs on the tab where you click the icon. The activeTab and scripting permissions exist solely to inject the overlay into the current page when you ask for it. Specsray is open source: https://github.com/ronnaf/specsray Also available for Firefox: https://addons.mozilla.org/en-US/firefox/addon/specsray/