DEV Community

R
R

Posted on

I made a browser extension that shows page dimensions and spacing all at once

I've tried it all - Measure Everything, Measuremate, Screen Ruler, CSS Peeper, CSS Scan, VisBug, Pesticide, Web Developer, you name it!

But sometimes I don't want to select an element, hover another, check the number, and repeat across the page.

Sometimes I just want to see everything.

So I made Specsray. One click puts the dimensions and spacing right on the page. You can also turn on distances, fonts, and colors, and toggle off whatever you don't need.

I don't know if something already does this exact thing, but this was the view I wanted. It gets busy with all the layers on, as you can see in the recording

It's available for Chrome and Firefox. Source is on GitHub, and there's a bookmarklet too.

Specsray showing dimensions and spacing across Optical Toys

Top comments (0)