Item logo image for Screen Ruler - Measure The Web

Screen Ruler - Measure The Web

Featured
4.5(

26 ratings

)
Item media 4 screenshot
Item media 5 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot
Item media 5 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot
Item media 5 screenshot

Overview

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

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.

4.5 out of 526 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Chikezie IroegbuNov 29, 2024

Great tool! But after the last update, the side panel now opens every time. I should be able to toggle it off if I don't need it.

1 person found this review to be helpful
Replier's profile picture

Myster VioletsDeveloperNov 29, 2024

Thanks for the feedback. I agree that the side panel should be optional, this has been fixed in the latest release (2.3.1).

Review's profile picture

Danny FelizSep 24, 2024

I can't open the side panel using the floating menu; I only need to click the extension's context menu. I'm using the latest version of Chrome; it happens on all the sites.

Replier's profile picture

Myster VioletsDeveloperSep 24, 2024

Hi, thanks for the feedback. I was unable to reproduce the issue you're having with the side panel, however I've tried to fix what I think might be the problem which will be available in 2.2.5.

Review's profile picture

Ishan ShahSep 11, 2024

Side bar does not open. There should be a pause button next to the exit/stop button. I need to reopen it multiple times (although you can still use a shortcut.) the UI overall is nicely designed.

2 out of 3 found this helpful
Replier's profile picture

Myster VioletsDeveloperSep 11, 2024

Thanks for the feedback! Are you using Chrome or a different browser? Not all browsers support the side panel.

Details

  • Version
    2.3.1
  • Updated
    November 29, 2024
  • Features
    Offers in-app purchases
  • Offered by
    Mr Violets
  • Size
    221KiB
  • Languages
    7 languages
  • Developer
    Email
    violetsmyster@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Screen Ruler - Measure The Web has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.

Screen Ruler - Measure The Web handles the following:

Personally identifiable information
Financial and payment information

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

Measure Everything

4.6(40)

Element distance measurement tool.

Page Ruler

4.2(4)

Use page ruler to measure page elements size in pixel with easy to use ruler.

Metric Spy

5.0(2)

Quickly Measure Elements on Web Pages with a Ruler Tool, Free Selection, and Convenient Keyboard Shortcuts.

Page Ruler: Your Web Design Companion

0.0(0)

Page ruler extension to measure elements on web pages. An advanced page ruler tool to measure the size of web elements in pixels.

Grid Ruler

3.8(335)

Create grids and measure their distance easily.

Simple Ruler

4.4(10)

A very simple ruler to check your webpage, without ads, without secrets, just a ruler.

Page Ruler

3.9(82)

Measure page elements size in pixel with an easy-to-use ruler.

Grid Lines Ruler

4.6(25)

Create grids on pages that provide the developers visual hints to help in developing the web app layouts.

Digital Ruler

5.0(5)

The ultimate online ruler app for precise on-screen measurements: Digital Ruler - measure pixel-perfect dimensions effortlessly!

Better Ruler

4.8(52)

一款网页测量工具,支持吸附测量。为前端开发和ui设计提供便利。

Dimensions

4.1(455)

A tool for designers to measure screen dimensions

Designer Tools

4.8(225)

A collection of tools to help you design and develop websites with precision.

Measure Everything

4.6(40)

Element distance measurement tool.

Page Ruler

4.2(4)

Use page ruler to measure page elements size in pixel with easy to use ruler.

Metric Spy

5.0(2)

Quickly Measure Elements on Web Pages with a Ruler Tool, Free Selection, and Convenient Keyboard Shortcuts.

Page Ruler: Your Web Design Companion

0.0(0)

Page ruler extension to measure elements on web pages. An advanced page ruler tool to measure the size of web elements in pixels.

Grid Ruler

3.8(335)

Create grids and measure their distance easily.

Simple Ruler

4.4(10)

A very simple ruler to check your webpage, without ads, without secrets, just a ruler.

Page Ruler

3.9(82)

Measure page elements size in pixel with an easy-to-use ruler.

Grid Lines Ruler

4.6(25)

Create grids on pages that provide the developers visual hints to help in developing the web app layouts.

Google apps