Screen Ruler
Measure the web
Listed in categories:
Chrome ExtensionsDesign ToolsDeveloper Tools
Description
Screen Ruler is a Chrome extension designed for web developers and designers to measure sizes, distances, margins, and paddings of any element on a web page. It allows users to validate the implementation of their websites by providing detailed information about the elements on the page, including tag names, IDs, and classes.
How to use Screen Ruler?
Toggle Screen Ruler by clicking the extension icon, selecting it from the right-click context menu, or using the shortcut Alt/Option + Shift + R. Hover over elements to display their sizes and properties, and select elements to measure distances between them.
Core features of Screen Ruler:
1️⃣
Measure the pixel size of any element
2️⃣
Measure the pixel distance between any two elements
3️⃣
Access HTML tag names, class names, and IDs
4️⃣
Responsive selections that resize with your browser window
5️⃣
Copy computed CSS to clipboard
Why could be used Screen Ruler?
| # | Use case | Status | |
|---|---|---|---|
| # 1 | Web developers validating website layouts | ✅ | |
| # 2 | Designers ensuring pixel-perfect implementation of designs | ✅ | |
| # 3 | Quality assurance teams checking alignment and spacing of web elements | ✅ | |
Who developed Screen Ruler?
Screen Ruler is developed by Mr. Violets, a developer focused on creating tools that enhance the web development experience. The extension is designed for stability in Google Chrome and is compatible with other Chromium browsers.