Page Ruler - Measure Pixels on Screen

Tracking since Apr 6, 2026.

Changelog

• Apr 26, 2026
  description

  Page Ruler lets you measure any element or area on a webpage in pixels. Drag to draw a ruler across any region, inspect element dimensions, add guidelines, and copy measurements — all the tools you need for pixel-perfect web design and development.
  
  **Key Features**
  
  - **Drag-to-Measure** — Click and drag anywhere on the page to draw a measurement box and see the width, height, and position in pixels.
  - **Element Inspector Mode** — Hover over any HTML element to instantly see its exact dimensions and bounding box.
  - **Guidelines** — Add horizontal and vertical guidelines to align and compare elements across the page.
  - **Color Customization** — Change the ruler and guideline colors to ensure visibility against any background.
  - **Copy Dimensions** — Copy measured width, height, top, left, and other position values to your clipboard with one click.
  - **Pixel-Perfect Accuracy** — All measurements are calculated directly from the page's rendered layout for precise results.
  
  **How to Use**
  
  1. Click the Page Ruler icon in the Chrome toolbar to activate measurement mode.
  2. Click and drag on the page to measure any rectangular area.
  3. Switch to Element Inspector mode to hover and auto-detect element boundaries.
  4. Add guidelines by clicking on the ruler edges.
  5. Click dimensions to copy values to your clipboard.

  Page Ruler lets you measure any element or area on a webpage in pixels. Drag to draw a ruler across any region, inspect element dimensions, add guidelines, and copy measurements — all the tools you need for pixel-perfect web design and development.
  
  Key Features
  
  - Drag-to-Measure — Click and drag anywhere on the page to draw a measurement box and see the width, height, and position in pixels.
  - Element Inspector Mode — Hover over any HTML element to instantly see its exact dimensions and bounding box.
  - Guidelines — Add horizontal and vertical guidelines to align and compare elements across the page.
  - Color Customization — Change the ruler and guideline colors to ensure visibility against any background.
  - Copy Dimensions — Copy measured width, height, top, left, and other position values to your clipboard with one click.
  - Pixel-Perfect Accuracy — All measurements are calculated directly from the page's rendered layout for precise results.
  
  How to Use
  
  1. Click the Page Ruler icon in the Chrome toolbar to activate measurement mode.
  2. Click and drag on the page to measure any rectangular area.
  3. Switch to Element Inspector mode to hover and auto-detect element boundaries.
  4. Add guidelines by clicking on the ruler edges.
  5. Click dimensions to copy values to your clipboard.

• Apr 26, 2026
  host_permissions

  (empty)

  <all_urls>

Permissions & access

Permissions

activeTabstorage

Host access

<all_urls>

Screenshots

Similar extensions

Alternatives to Page Ruler - Measure Pixels on Screen, ranked by description similarity.

Page Ruler

Page Ruler: Drag guidelines and inspect element properties for perfect UI practice in browser.

10.0K

★ 3.3

Browser Ruler

Measure UI elements and create guide lines on any webpage.

33

Page Ruler: Your Web Design Companion

Page ruler extension to measure elements on web pages. An advanced page ruler tool to measure the size of web elements in pixels.

4.0K

★ 3.3

Pixel Ruler

Measure any element on a webpage - drag to measure, element highlight, guides & multiple units

17

Pixel Perfect Extension

Easily measure pixel-perfect distances between elements on any webpage with intuitive tools. Ideal for developers, designers, and QA

404

★ 5.0

The Ruler

A simple and complete ruler to measure viewport distances with pinned guides.

9

Screen Ruler

Use screen ruler for Chrome measure pixels on screen and as browser plugin. Get pixel ruler extension for website page dimensions.

2.0K

★ 4.6

PixelRuler

Precision web measurement with snap-to-element for UI/UX design. by AIO.com.ai

8