How To Install & Use Page Ruler Extension In Google Chrome [2026 Guide]

How To Install & Use Page Ruler Extension In Google Chrome [2026 Guide]

I'm going to teach you how to install and use the page ruler extension in Google Chrome. By the end, you'll know exactly how to add the tool to your browser, pin it where you can reach it quickly, and use it to measure elements on any web page with confidence.

Install & Use Page Ruler Extension In Google Chrome [2026 Guide]

Install page ruler from the Chrome web store

  1. Open Google Chrome on your computer.
  2. Look to the very top right corner of the browser window for the three vertical dots. That's the main Chrome menu. Click it to open the menu so we can get to the extension store.
  3. Find the extensions option and choose visit Chrome web store. Depending on your version of Chrome, you might first see manage extensions. If so, open that and then use the link there to open the Chrome web store. The goal is the same. Get to the store where we can search for the page ruler extension.
  4. Once the store is open, use the search bar at the top left. Type page ruler and press enter. You should see results related to measuring elements on a page in pixels. Take a moment to check the listing details like the description and reviews to make sure you're selecting a trustworthy version.
  5. When you found the correct listing, click add to Chrome. A small popup will ask you to confirm. Click add extension to proceed. Chrome will download and install it and you'll usually see a quick confirmation near the top right. If a permissions prompt appears, review it and continue.

Screenshot from How To Install & Use Page Ruler Extension In Google Chrome [2026 Guide] at 30s

Pin page ruler for quick access

  • After it's installed, click the puzzle piece icon in the toolbar near the top right of Chrome. That's the extensions menu.
  • Find page ruler in the list and click the pin icon next to it.
  • Pinning keeps the page ruler icon visible beside the address bar so you can launch it with one click whenever you need it.

Screenshot from How To Install & Use Page Ruler Extension In Google Chrome [2026 Guide] at 87s

Measure elements on a web page

  • Click the page ruler icon to activate the tool.
  • Move your cursor over the page and click and drag to draw a measurement box over any element you want to measure. As you drag, you'll see width and height values, typically in pixels, so you know the exact size.
  • Release the mouse to set the box and then you can adjust it by dragging the edges or corners to fine-tune your measurement.
  • Try moving the box around to compare different sections like images, buttons, or content areas.
  • When you're done, click the page ruler icon again to turn it off or close the overlay if the tool provides a close button.

Screenshot from How To Install & Use Page Ruler Extension In Google Chrome [2026 Guide] at 127s

Screenshot from How To Install & Use Page Ruler Extension In Google Chrome [2026 Guide] at 100s

Final Thoughts

That's it. You've installed page ruler, pinned it for quick access, and measured elements right on the page. Practice a few times and it'll become a fast part of your workflow.

Recent Posts