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

Latest Version

Version
2.4.0
Update
December 6, 2024
Size
1.97MiB
Developer
Category
Users
10,000+
Rating
4.53846 ★
Manifest Version
3
Web Store Status
Languages Support
Deutsch
English
Français
Español
русский
हिन्दी
日本語
See more
Permissions
Scripting
ActiveTab
ContextMenus
Commands
Storage
Offscreen
DeclarativeContent
SidePanel
See more

Screen Ruler - Measure The Web Extension

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. Element Inspect: See an element's properties when you move your mouse over it. Includes information about element position, size, rendered font, colors and more.
2. Layout Grid: Superimpose a layout grid on top of the site to validate the alignment of your designs.
3. Capture a screenshot of the currently highlighted area by clicking the screenshot control or using the `Ctrl/Command + Shift + S` keyboard shortcut. Perfect for documentation or attaching to Github tickets.
4. See advanced properties in the browser side panel including element box model, selection colors, assets and more.

Screen Ruler PRO requires a one-off payment for lifetime access. To upgrade to PRO, click \"Upgrade to PRO\" in the context menu or right-click the extension icon for upgrade options.

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.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "__MSG_EXT_NAME__", "description": "__MSG_EXT_DESCRIPTION__", "version": "2.4.0", "minimum_chrome_version": "116", "manifest_version": 3, "default_locale": "en", "permissions": [ "scripting", "activeTab", "contextMenus", "commands", "storage", "offscreen", "declarativeContent", "sidePanel" ], "optional_permissions": [ "downloads" ], "web_accessible_resources": [ { "resources": [ "scripts/patterns/*.svg" ], "matches": [ "" ] } ], "content_scripts": [ { "matches": [ "https://extensionpay.com/*" ], "js": [ "ExtPay.js" ], "run_at": "document_start" } ], "icons": { "16": "images/icon16.png", "24": "images/icon24.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "background": { "service_worker": "background.js" }, "action": { "default_title": "__MSG_EXT_NAME_SHORT__" }, "commands": { "_execute_action": { "suggested_key": { "default": "Alt+Shift+R", "mac": "Alt+Shift+R" } }, "select_parent": { "suggested_key": { "default": "Alt+Up", "mac": "Alt+Up" }, "description": "Move selection to parent element." }, "select_child": { "suggested_key": { "default": "Alt+Down", "mac": "Alt+Down" }, "description": "Move selection to child element." }, "save_screenshot": { "suggested_key": { "default": "Ctrl+Shift+S", "mac": "Command+Shift+S" }, "description": "Take a screenshot of the highlighted area (PRO)." } }}
Read more

How to download and manually install Screen Ruler - Measure The Web extension for Chrome

Looking for a way to install Screen Ruler - Measure The Web extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Screen Ruler - Measure The Web extensions manually, this article outlines two simple methods to effortlessly install Screen Ruler - Measure The Web extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Screen Ruler - Measure The Web extension and manually install through Drag &Drop

If you ever need to manually install a Screen Ruler - Measure The Web extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Screen Ruler - Measure The Web Extension by clicking the "Download CRX" button on the website.

Look for the Screen Ruler - Measure The Web extension you wish to install. Go to the website and download the Screen Ruler - Measure The Web extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Screen Ruler - Measure The Web extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Screen Ruler - Measure The Web extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Screen Ruler - Measure The Web extension for Chrome and install in Developer Mode

This is another method to install Screen Ruler - Measure The Web extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Screen Ruler - Measure The Web extension file

Select and download the Screen Ruler - Measure The Web extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Screen Ruler - Measure The Web extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Screen Ruler - Measure The Web extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Screen Ruler - Measure The Web extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Screen Ruler - Measure The Web extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

Grid Ruler Extension · Developer Tools 10,000+ 335 ★ 288KiB

icon

Simple Ruler Extension · Developer Tools 10,000+ 10 ★ 44.62KiB

icon

Page Ruler Extension · Productivity 10,000+ 83 ★ 256KiB

icon

Grid Lines Ruler Extension · Developer Tools 10,000+ 25 ★ 152KiB

icon

Digital Ruler Extension · Productivity 10,000+ 5 ★ 155KiB

icon

Better Ruler Extension · Developer Tools 10,000+ 52 ★ 93.66KiB

icon

Dimensions Extension · Developer Tools 10,000+ 454 ★ 17.28KiB

icon

Measure Everything Extension · Developer Tools 10,000+ 40 ★ 52.93KiB

icon

Page Ruler Extension · Productivity 10,000+ 4 ★ 171KiB

icon

Metric Spy Extension · Developer Tools 10,000+ 2 ★ 268KiB

icon

Page Ruler: Your Web Design Companion Extension · Developer Tools 10,000+ 0 ★ 46.28KiB

icon

PixGrid Ruler Extension · Productivity 10,000+ 14 ★ 476KiB

icon

Pixel measurement Extension · Developer Tools 10,000+ 26 ★ 236KiB

icon

Page Ruler Extension · Developer Tools 10,000+ 15 ★ 15.33KiB

icon

Measuremate Extension · Developer Tools 10,000+ 42 ★ 797KiB

icon

Scope Master Extension · Developer Tools 10,000+ 2 ★ 351KiB

icon

Page Grid Ruler Extension · Developer Tools 10,000+ 0 ★ 68.01KiB

icon

Ruler Measurement Extension · Developer Tools 10,000+ 40 ★ 122KiB

icon

Measure-it Extension · Developer Tools 10,000+ 40 ★ 15.63KiB

icon

MaxFocus: Link Preview & AI Assistant Extension · Productivity 10,000+ 107 ★ 426KiB

icon

Responsive Viewer Extension · Developer Tools 10,000+ 298 ★ 639KiB

icon

Liner. The Real Ruler Extension · Developer Tools 10,000+ 74 ★ 54.28KiB

icon

Color Picker - Eyedropper Tool Extension · Productivity 10,000+ 939 ★ 1.77MiB

icon

Designer Tools Extension · Developer Tools 10,000+ 227 ★ 987KiB