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.

1. Open the Chrome Web Store listing and click Add to Chrome.
2. 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.

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.

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 colours 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 colour 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:

• Option/Alt + Shift + S — toggle Screen Ruler on or off.
• Option/Alt + ↑ — select the parent of the currently selected element.
• Option/Alt + ↓ — select the first child of the currently selected element.
• Esc — release the current selection, or close any open popover.

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

• 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

The free plan includes element inspection, distance measurement, computed CSS, page rulers, the eyedropper, parent/child navigation, element screenshots, accessibility issue detection, and the page meta tag inspector. Pro unlocks asset extraction, the responsive mode, the floating inspector, the matched-rules and Tailwind views, colour and typography extraction, technology detection, layout grid overlay, X-Ray, CSS selector search, the box-shadow / gradient / animation / transition visualisers, layout inspection, breakpoint detection, and canvas inspection.

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