Screen Ruler - Measure The Web

Measure sizes, distances, margins and paddings of any element on any web page.

Screen Ruler - Measure The Web | Edge Add-on

"Screen Ruler - Measure The Web" is a powerful Edge add-on designed for web developers and designers. It allows users to measure the pixel size, margins, paddings, and distances between elements on any web page. With features like element inspection, responsive selections, and computed CSS viewing, it streamlines the validation of website implementations. The PRO tier offers additional tools such as layout grids and screenshot capabilities, making it an indispensable tool for ensuring pixel-perfect accuracy in design and development.

Add-on stats

Users: 617
-2
Version: 2.4.0 (Last updated: 2024-12-05)
Creation date: 2024-05-25
Risk impact: Low risk impact
Risk likelihood:
Manifest version: 3
Permissions:
  • scripting
  • activeTab
  • contextMenus
  • commands
  • storage
  • offscreen
  • declarativeContent
  • sidePanel
Size: 218.32K

Other platforms

Not available on Chrome
Not available on Android
Not available on Firefox
Want to check extension ranking and stats more quickly for other Edge add-ons? Install Chrome-Stats extension to view Edge-Stats data as you browse the Edge Add-on Store.

Add-on summary

Analyze keywords

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.
  • Open the side panel to view the computed CSS of the currently selected element. 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.
See more

Add-on safety

Risk impact

Screen Ruler - Measure The Web requires very minimum permissions.

Risk likelihood

Screen Ruler - Measure The Web may not be trust-worthy. Avoid installing if possible unless you really trust this publisher.

Upgrade to see risk analysis details

Promo images

Screen Ruler - Measure The Web marquee promo image
Marquee promo image