WebExtension.net
WebExtension.net
Toggle dark mode
WebExtension.net
WebExtension.net
Screen Ruler - Measure The Web

Screen Ruler - Measure The Web

View on Chrome Web Store
View Screen Ruler - Measure The Web Chrome Extension on Chrome Web Store
Add to bookmarks
4.6 (41 ratings)
1 new ratings
13 views
This extension has been viewed 13 times
0 downloads
This extension has been downloaded 0 times

Data is synced from the Chrome Web Store. View the official store page for the most current information.

Measure sizes, distances, margins and paddings of any element on any web page.
Type
Extension
Users
30,000 users
5K
Mr Violets
View author page of Mr Violets
Featured Extension

Hand-picked for quality and usefulness

Published
Published on March 29, 2024
Version 3.1.0
Manifest version
3
Updated
Updated on August 11, 2025
productivity/developer
Extension Category
Website
Visit developer website
View on Chrome Web Store
View Screen Ruler - Measure The Web Chrome Extension on Chrome Web Store
Share This Extension
Share on Twitter
Share on Facebook
Share on LinkedIn
Share on Reddit
Share on Bluesky
Share on Pinterest
Screen Ruler - Measure The Web Chrome Extension Image 1
Screen Ruler - Measure The Web Chrome Extension Image 2
Screen Ruler - Measure The Web Chrome Extension Image 3
Screen Ruler - Measure The Web Chrome Extension Image 4
Screen Ruler - Measure The Web Chrome Extension Image 5

Description

Screen Ruler is the perfect companion for web developers and designers wanting to validate the implementation of their websites. Once activated, Screen Ruler allows you to view the sizes, margins, paddings, tag names, IDs, and classes simply by hovering over any element. You can also select an element to measure distances to other elements.

Usage

  • Toggle Screen Ruler by clicking the extension icon, selecting “Screen Ruler” from the right-click context menu, or using the shortcut Alt/Option + Shift + R.
  • Hover over elements on web pages to display their sizes, margins, paddings, tag names, IDs, and classes.
  • Select an element by clicking on it directly, this will turn the highlight red. To deselect, click again, press Escape or select a different element.
  • To select the parent of an element, use Alt/Option + Up, moving your selection to the parent element instead, use Alt/Option + Down to reverse your selection.
  • View the computed CSS of the currently selected element in the side panel. Click the "Copy CSS" button to copy the computed CSS of the currently selected item to your clipboard.

Features

  • Measure the pixel size of any element.
  • Measure the pixel distance between any two elements.
  • HTML tag names, class names and IDs.
  • Parent/child selection shortcuts.
  • Responsive selections resize with your browser window.
  • Access from the context menu.
  • Computed CSS inspect.
  • Copy CSS to clipboard.
  • Works on any web page.
  • Customize keyboard shortcuts by visiting chrome://extensions/shortcuts.

Screen Ruler PRO Screen Ruler also offers a PRO tier which unlocks additional features.

  1. Floating Inspector: See detailed element properties when you hover, including position, size, rendered font, colors and more.
  2. Box Model Visualization: Box model diagram showing margins, borders, padding, and content dimensions.
  3. Animation Analysis: Visualize CSS animation timing curves and copy animation CSS properties.
  4. Asset Extraction: Extract and download images, SVGs, and vector assets directly from any webpage.
  5. Color Extraction: Extract and copy color palettes from selected elements with hex, RGB, and HSL values.
  6. Layout Grid Overlay: Overlay a customizable layout grid for perfect design alignment.
  7. Element Screenshots: Capture cropped screenshots of selected elements using Ctrl/Cmd + Shift + S.
  8. CSS Selector Search: Find and highlight elements using CSS selectors..
  9. Advanced Side Panel: Complete element analysis including computed styles, box model, colors, assets, and animations.

Screen Ruler PRO requires a one-off payment for lifetime access.

Screen Ruler is Made For

  • Developers: Spotting layout issues or identify alignment problems. Whether you're tweaking margins and paddings, or just making sure everything lines up correctly, Screen Ruler becomes an indispensable addition of your development toolkit.
  • Designers: Ensure your designs have been implemented with pixel-perfect accuracy. Screen Ruler acts as a bridge between design and development, allowing you to check is every element aligns exactly as you intended.

Installation

  • Screen Ruler is designed specifically for stability in Google Chrome 116+.
  • Screen Ruler is installable on any Chromium browser however, for the best experience make sure your browser supports all the required APIs (like Side Panel and Offscreen). If there are any issues with installation, update your browser to the latest version and try again.
© 2025 WebExtension.net. All rights reserved.
Disclaimer: WebExtension.net is not affiliated with Google or the Chrome Web Store. All product names, logos, and brands are property of their respective owners. All extension data is collected from publicly available sources.
Go to top