Screen Ruler - Measure The Web

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

Screen Ruler - Measure Sizes on the Web

Screen Ruler - Measure The Web is a powerful Chrome extension designed for web developers and designers. It allows users to measure the sizes, margins, paddings, tag names, IDs, and classes of any web page element simply by hovering. With features like parent/child selection shortcuts, computed CSS inspection, and a PRO tier offering advanced tools, Screen Ruler ensures that you can validate and implement designs with pixel-perfect accuracy. Ideal for spotting layout issues and enhancing your development toolkit.

Download

Extension stats

By: Mr Violets

Users: 10,000+

Rating: 4.54

(26)

Version: 2.4.0 (Last updated: 2024-12-12)

Creation date: 2024-03-29

Risk impact: Low risk impact

Risk likelihood:

Low risk likelihood

Manifest version: 3

Permissions:

scripting
activeTab
contextMenus
commands
storage
offscreen
declarativeContent
sidePanel

Size: 2.07M

Email: vi*****@gmail.com

URLs: Privacy policy

Ranking

# 9,038 ▲ 58

Other rankings

#114 in Developer Tools ▲ 1

#34 in screen keyword 88 ▲ 1

#56 in upgrade keyword 3 ▼ 1

#83 in layout keyword 23 ▲ 2

#90 in size keyword 11 ▼ 6

Upgrade to see more rankings

Other platforms

Screen Recorder (v1.7.0)

3.12

(2,466) 1,383,695+

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension 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.
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.

User reviews

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.

Pros