Getting started

Install Screen Ruler, activate it on any webpage, and learn the control bar, side panel, and keyboard shortcuts in five minutes.

Install

Screen Ruler is a Chrome extension. Install it from the Chrome Web Store and pin it to your toolbar so the icon is always visible.

Open the Chrome Web Store listing and click Add to Chrome.
Click the puzzle-piece extensions icon in the toolbar, find Screen Ruler, and click the pin.

Screen Ruler works in Chrome, Edge, Brave, Arc, Vivaldi, and other Chromium-based browsers running version 116 or higher.

Screen Ruler requests no host permissions. It reads a tab only after you activate it there, and it never runs in the background on sites you have not opened it on.

Activate it

Open any webpage and start the ruler one of three ways:

Click the Screen Ruler icon in your toolbar.
Press Option/Alt + Shift + S.
Right-click anywhere on the page and pick Screen Ruler from the context menu.

Screen Ruler cannot run on browser pages such as chrome:// and edge://, on other extensions’ pages, or on the Chrome Web Store. Those URLs are blocked by the browser itself, not by the extension.

The page enters inspection mode: a control bar appears, and a side panel opens on the right. Move your cursor anywhere on the page to start inspecting elements. Press the same shortcut again to deactivate.

The control bar

The control bar floats at the bottom of the page and gives you one-click access to every on-page tool. Each button is a toggle: click once to turn the tool on, click again to turn it off.

From the control bar you can:

Toggle page rulers with a crosshair tracking your cursor.
Sample colors with the eyedropper.
Capture an element screenshot with margin overlays included.
Open the find popover to search the page by CSS selector.
Toggle a layout grid, X-Ray Mode, or breakpoint guides.
Switch into responsive mode to preview the page at device sizes.
Pause inspection to freeze hover states and dropdowns.

Each of these tools has its own deep-dive doc: the sidebar on the left lists where to find them.

The side panel

The side panel opens to the right of the page when Screen Ruler is active. It has two tabs:

Element: details for whatever element you have selected, including its computed CSS, matched stylesheet rules, layout, animations, transitions, gradients, box-shadows, and accessibility issues.
Page: details for the whole page, including SEO and Open Graph meta tags, an OG image preview, the color palette, typography styles, image and SVG assets, and detected technologies.

Click an element on the page to populate the Element tab. The Page tab is always available even when nothing is selected.

Keyboard shortcuts

Toggle and navigation shortcuts:

Shortcut	Action
`Option`/`Alt` + `Shift` + `S`	Toggle Screen Ruler on or off
`Option`/`Alt` + `Shift` + `↑`	Select the parent of the current element
`Option`/`Alt` + `Shift` + `↓`	Select the first child of the current element
`Esc`	Release the current selection, or close any open popover

Number keys trigger the control-bar tools directly while Screen Ruler is active:

Key	Tool
`1`	Floating Inspector
`2`	X-Ray Mode
`3`	Layout Grid Overlay
`4`	Page Rulers
`5`	Breakpoints
`6`	Color Picker (eyedropper)
`7`	CSS Selector Search
`8`	Element Screenshot
`9`	Responsive Mode
`0`	Toggle the side panel

Trial & Pro

Free	Pro
Element inspection Distance measurement Computed CSS Page rulers The eyedropper Parent/child navigation Element screenshots Accessibility issue detection Page meta tag inspector	Asset extraction Responsive mode Floating inspector Source and Tailwind views Color and typography extraction Technology detection Layout grid overlay X-Ray mode CSS selector search Box-shadow, gradient, animation and transition visualizers Layout inspection Breakpoint detection Canvas inspection

Every install starts with a free trial of Pro, no card required. After the trial, free features stay free forever; Pro is a one-time purchase with a 30-day money-back guarantee.