Another tool I’ve been using a lot in web development lately is MeasureIt – Firefox ruler extension for web developers:
Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
The screenshot shows me measuring a random part of a grey box on a rather colourful web page. I needed to measure an empty space or the ruler would have been ‘lost’ in my screenshot.
The ruler in my picture shows the area being measured is 100 pixels wide by 19 pixels high. I’m about to click the red X to dismiss the ruler.
After installing the Firefox extension click the icon at bottom left of the window to activate measuring mode. You can see the icon in my screenshot at bottom left, next to the word
Done. Then just drag anywhere on the page to start measuring.
When you’ve finished measuring click the icon at bottom left again to deactivate measuring mode.
It’s a simple little thing, but being able to directly measure elements on a web page has saved me a chunk of time lately.