How To Measure Pixels On A Webpage?

Quite recently one of my friend on (follow me @keithdsouza) asked how one could measure pixels between any two points on a webpage?

There was something about this question, that made me realize that, I have been using a that helps users to measure pixels on a webpage, in a quick and easy way for ages now.

The Web Developer extension for is something I rely on quite often for several reasons, I feel will not fit this post, but to answer this certain question, you can easily measure pixels on any webpage using the Web Developer add-on.

If you do not already have this useful add-on installed in Firefox, download it first and then visit the toolbar or the Tools menu and click on Miscellaneous > Display Ruler.


Once you have enabled the ruler you can measure any object on the webpage to determine the exact pixels used for the HTML object. Take a look at the screenshot below to see how much pixels are used to display the Techie Buzz logo.


This is one extension we would recommend to everyone, there are several other features which come in really handy and can make it a must have Firefox add-on.

We have a compiled list of cool for programmers and designers coming up soon, it’s been on a backburner, but this question has led me to work and publish that post faster, so stay tuned and visit back regularly.

Download Web Developer Firefox Add-on

Published by

Keith Dsouza

I am the editor-in-chief and owner of Techie Buzz. I love coding and have contributed to several open source projects in the past. You can know more about me and my projects by visiting my Personal Website. I am also a social networking enthusiast and can be found active on twitter, you can follow Keith on twitter @keithdsouza. You can click on my name to visit my Google+ profile.