CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
Measure sizes, distances, margins and paddings of any element on any web page.
Image from store
Description from store
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: Overlay a layout grid on top of the site to ensure 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.
Latest reviews
- (2025-06-24) Victor Biletskiy: Alt/Option + Shift + R seems does not work to toggle via shortcut.. How to open and close extensions using hotkeys? So you don't have to click the mouse all the time
- (2025-06-13) Richard Brus: A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler.. An invaluable piece of my workflow when designing sites. Great job 10/10
- (2025-05-12) Misha Vs: This is the best on-screen roulette/ruler available in the Chrome Store, but it has recently stopped working in the Yandex Browser 😭 (I need to work in it from time to time)
- (2025-04-02) T VICKY: Love it
- (2025-03-03) Kelvin Ugbana: Perfect.. Works for me
- (2025-02-27) Fynn: Pretty good, but doesn't seem to display gap information unless it's in a grid/flex (which is the main information I want to view). It also doesn't allow you to scroll when active, so you have to toggle it off (and reopen the side panel, if you had it opened).
- (2025-02-11) R.c gamer: Great tool! I am a Web developer. It's really usefull for me.
- (2025-01-23) Muhammad Usman: love it 👍🏻
- (2024-11-29) Chikezie Iroegbu: 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.
- (2024-11-28) Anna F.: Lovely! Just like Figma's rulers. Haven't used it much but seems to work exactly as expected so far. Thanks! UPDATE: recently the side panel started popping up by itself whenever I enable the extension! I don't want that! I'm using Brave browser and there's no easy way to remove the side panel. I have to switch to one of the Braves' panels and then minimize that to get rid of it. Can you please add an option to not enable the side panel whenever you enable the extension?
- (2024-09-24) Danny Feliz: 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.
- (2024-09-11) Ishan Shah: 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.
- (2024-09-10) Hashaam Ahmed: Nice, but the side panel doesnt popup on most of the sites using the navigation/bar below the screen, need to right click on the extension to view the side panel. Thank you.
- (2024-09-06) Patrik Gustavsson: Side panel doesn't work on Arc browser for me :( (using latest Mac OS)
- (2024-08-23) Levy Santa Ana: Not working
- (2024-08-21) Manuel Avella-Salazar: Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.
- (2024-08-07) Shane: Exactly what I was looking for. Excellent!
- (2024-07-25) Best Lay: Very Good
- (2024-06-17) Александр Ратманский: Nice!
- (2024-05-20) Walter Córdoba: ¡Fantastic!
- (2024-05-08) Dave Mejias: This extension is incredible... Do you have any contact info? I need help to buy pro.
- (2024-04-13) JaeHun Sim: Awesome