Pixel Measurement for your website

Pixel Measurement: How does one measure a web page or items on it, in pixels? Maybe you need to know the width of your sidebar(s) or the size of your content area .. or any other element on your page. That is what I needed and I found a Chrome extension: Page Ruler tool that will do that for me.

Page Ruler tool, a Chrome extension

Page Ruler tool, a Chrome extension

How to get the Page Ruler tool for Chrome

First, find the Page Ruler tool (by wrakky) and click the “Add to Chrome” button.

How to use the Page Ruler tool

Once installed on your Chrome browser, you will find it as a icon-tool at the top of your browser.

Page Ruler icon in Chrome browser

Page Ruler icon in Chrome browser


Whenever you visit a web page, just click on the ruler icon.

A ruler bar will appear at the top of the web page.  (You can also dock it to the bottom by clicking the down arrow at the right of the ruler bar.)

Page Ruler tool: ruler bar

Page Ruler tool: ruler bar

To measure the dimension of any element on the web page, just click-and-drag your mouse over the element.  The boxes in the ruler bar will change, displaying the dimension (pixel measurement) you have drawn.

As I am using Chrome, Page Ruler is the browser extension I use.  There is also an add-on for Firefox which might be of use to Firefox users: MeasureIt






Enjoyed this post?

Easily subscribe to keep get all new postings via email. No We Don't Serve Spam - Ever!

We respect your privacy

Your Comments? Tips to share?