# Screen Ruler

> A Chrome extension for developers and designers to inspect elements, measure distances, extract assets, and validate designs on any webpage. Used by 60,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+Shift+Up/Down)
- **Element Screenshots**: Capture cropped screenshots of selected elements
- **Accessibility Issues**: Automatic detection of WCAG contrast failures, computed against the composited background the browser actually paints
- **Pause Inspection**: Freeze the current state to inspect tooltips, dropdowns, and hover states
- **Dark Mode**: Full dark mode support

## Inspect Features ($19 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

## Studio Features ($49 one-time)

Everything in Inspect, plus live editing:

- **Live CSS Editing**: edit real CSS rules DevTools-style, applied to actual selectors with full cascade behavior
- **HTML and Text Editing**: cut, copy, paste, and rewrite page HTML and text directly in the browser
- **State and Breakpoint Editing**: edit hover/focus states, pseudo-elements, and media-query breakpoints
- **Change Tracking**: rule-keyed diffs of every edit with per-change revert and copy-out as paste-ready CSS
- **MCP Server**: drive Screen Ruler from AI coding agents like Claude Code and Cursor

## Pricing

- **Free**: all core inspection, measurement, and CSS features
- **Inspect**: $19 one-time, every inspection tool unlocked forever
- **Studio**: $49 one-time, everything in Inspect plus live editing and the MCP server
- Free 7-day Studio trial, no card required
- 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+S (Option+Shift+S 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.