# Screen Ruler

> A Chrome extension for developers and designers to inspect elements, measure distances, extract assets, and validate designs on any webpage. Used by 50,000+ developers and designers worldwide.

- Website: https://www.screen-ruler.com
- Chrome Web Store: https://chromewebstore.google.com/detail/jfbbgijjljfbolelfkopkhbfjajjampm
- Purchase: https://mrviolets.gumroad.com/l/screen-ruler

## What is Screen Ruler?

Screen Ruler is a browser-based web inspector that lets you hover over any element on a webpage to instantly see its size, spacing, CSS properties, colors, typography, and more. It works directly in Chrome with no setup — activate it, hover, and inspect. Think of it as a lightweight DevTools alternative focused on visual inspection and measurement.

## Who is it for?

- **Frontend developers** who need to check element dimensions, spacing, computed CSS, and layout properties without digging through DevTools
- **UI/UX designers** who want to validate that implementations match their designs — pixel-perfect checking of sizes, colors, typography, and spacing
- **QA engineers** who need to verify visual specs and catch accessibility issues like WCAG contrast failures

## Free Features

- **Element Inspection** — Hover to view sizes, margins, paddings, tag names, IDs, and classes
- **Distance Measurement** — Select an element, then hover others to see pixel distances between them
- **Computed CSS** — View and copy any element's computed CSS properties
- **Page Rulers** — Horizontal and vertical guides with a crosshair for alignment
- **Color Picker** — Built-in eyedropper tool to sample any color on the page
- **Parent/Child Selection** — Navigate the DOM hierarchy with keyboard shortcuts (Alt+Up/Down)
- **Element Screenshots** — Capture cropped screenshots of selected elements
- **Accessibility Issues** — Automatic detection of WCAG contrast failures
- **Pause Inspection** — Freeze the current state to inspect tooltips, dropdowns, and hover states
- **Dark Mode** — Full dark mode support

## Pro Features ($29 one-time)

- **Asset Extraction** — Download images and SVGs directly from any page
- **Responsive Mode** — Test pages at different device widths without resizing your browser
- **Floating Inspector** — A compact overlay showing element details without opening the side panel
- **Color Extraction** — Extract all text, background, and border colors used across a page
- **Typography Analysis** — See all font families, sizes, and weights used on a page with visual specimens
- **Technology Detection** — Identify frameworks and libraries used on any site
- **Layout Grid Overlay** — Overlay customizable column grids for alignment checking
- **Box Shadow Visualization** — Visual breakdown of box-shadow values
- **Animation Analysis** — Inspect CSS animations with easing curve visualization
- **CSS Selector Search** — Find and highlight elements matching any CSS selector
- **X-Ray Mode** — See element boundaries across the entire page at once
- **Tailwind CSS Generator** — Convert computed styles to Tailwind utility classes
- **CSS Rules Inspector** — View matched CSS rules (not just computed values)
- **Transition Inspector** — Analyze CSS transition properties
- **Canvas Inspection** — Inspect HTML canvas elements
- **Layout Inspection** — Visual flexbox and grid layout debugging
- **Gradient Visualization** — Visual breakdown of CSS gradients with color stops
- **Breakpoint Detection** — See CSS breakpoints defined in the page's stylesheets

## Pricing

- **Free** — All core inspection, measurement, and CSS features
- **Pro** — $29 one-time payment, all features unlocked forever
- **Team** — 5 license keys (20% discount)
- **Enterprise** — 10 license keys (30% discount)
- 30-day money-back guarantee on all paid plans
- Regional pricing available

## How to Use

1. Install from the Chrome Web Store
2. Activate with the toolbar icon, right-click context menu, or Alt+Shift+R (Option+Shift+R on Mac)
3. Hover over any element to inspect it
4. Click to select an element and see detailed properties in the side panel
5. Use keyboard shortcuts to navigate parent/child elements

## Requirements

- Chrome 116 or later
- Works best on Chromium-based browsers (Chrome, Edge, Brave, Arc, Vivaldi) with Side Panel support

## Comparison to Alternatives

Screen Ruler combines the functionality of several separate tools into one extension: element inspection (like Chrome DevTools but faster for visual checks), distance measurement (like PixelSnap or MeasureIt), color picking (like ColorZilla), screenshot capture, and design validation. It is purpose-built for the intersection of design and development workflows.