Here’s a list of 3 ruler addons for Firefox which you can use to measure length of elements and distance between them on websites open in Firefox. Web developers that work on website design or those that are building them from scratch have to know precise distances between elements practically all the time and that’s exactly who will benefit the most using the addons from the following list. All the addons are free and easy to install from the Firefox addon marketplace.
Let’s see what we got.
MeasureIt
MeasureIt is hands down the best ruler addon for Firefox. It’s very simple to use and it does its job perfectly. Measuring process can be started by clicking on the top right corner addon icon. Addon can be seen in action on the image above.
Image shows the measuring area with size calculated in the top right corner of the selected measuring box. To measure something on a website just left click and hold down the left click while dragging the measuring area to fit the object (header picture or website sidebar for example) that you want to measure. Size of the selection is written in the top right corner automatically, like we already mentioned which basically means that the size is measured right away, as you’re stretching the measuring box.
Get MeasureIt.
L-Square Responsive Design Inspector
Technically speaking L-Square Responsive Design Inspector is not a ruler like MeasureIt is a ruler, but it can be used to measure approximately the size of website elements (menus, headers, sidebars) and also the size of the browser window.
Measuring browser window size is important for testing out responsive design of a website. Notice on the image above that you get a ruler around the edges of the website tab where L-Square is activated by clicking on its top right corner icon. There’s no way to draw markers or create selections with this ruler addon, so you’ll have to estimate the sizes of elements and browser windows. That’s why we said “measure approximately” a while back.
Get L-Square Responsive Design Inspector.
FoxGuide
FoxGuide is the last ruler addon on our list and it’s like L-Square only much more advanced, as you can see from the screenshot above.
This ruler addon also adds a ruler along the edges of the browser window. On top of that it also has a small pop-up panel (in the bottom right corner) for keeping track of mouse pointer position (X and Y pixel count) and managing guides. Guides are used for marking objects on websites (something similar can be found in Photoshop). Their coloring can be changed, so that it’s easier to tell them apart.
Get FoxGuide.
Conclusion
We called a winner at the start of this list and as we went through the apps our opinion hasn’t changed. We still think that MeasureIt is the best ruler addon, and even though all the others can be useful, they just aren’t as precise. Let us know what you think in the comment section down below.
