Measure, Inspect & Edit Anything on the Web

Distance Measurement. Select an element to measure pixel distances between it and other elements on the page.

Responsive Mode. Test designs across different device viewports with an interactive device emulator and custom dimensions.

CSS Inspection. View the computed styles and the real CSS rules behind any element, and copy them straight to your clipboard.

Colors & Assets. Sample any color with the eyedropper, extract full palettes, and download images and SVGs from the page.

Live CSS Editing with Change Tracking. Edit the page's real CSS rules, including @media, @layer, and @container. Every CSS change is tracked in a diff you can copy or revert with one click.

HTML & Text Editing. Copy, paste, duplicate, or delete elements directly on the page. Text editing mode lets you rewrite page copy in place. Every change is tracked in a diff you can revert.

Tailwind Class Editor. Add, remove, and edit Tailwind utility classes on any element with changes applied live in the browser.

Page Rulers. Horizontal and vertical guides with crosshair for precise measurements across the viewport.

Parent/Child Selection. Navigate element hierarchy with keyboard shortcuts to select parent or child elements.

Element Screenshots. Capture cropped screenshots of selected elements with margins and measurements included.

Contrast Audit. Scan the page for WCAG contrast failures with pass and fail ratios for AA and AAA compliance.

SEO Audit. Flag common SEO problems like missing meta descriptions, alt text, and heading structure issues.

Technology Detection. Identify the frameworks, libraries, and analytics tools powering any site.

Meta Tags. Inspect SEO, Open Graph, and Twitter card meta tags grouped by category in the side panel.

Social Preview. Preview how your page renders when shared on Facebook, X, and LinkedIn using the page's actual metadata.

MCP Server. Connect any AI coding agent (Claude Code, Cursor, and more) to Screen Ruler. Let your AI inspect, edit, and validate any page directly in the browser.

Floating Inspector. Detailed element properties on hover. Press Space to pin inspectors and compare multiple elements side by side.

Typography Analysis. Analyze and extract all typography styles used in your selection.

Layout Grid Overlay. Overlay a customizable column grid for checking design alignment and spacing.

Box Shadow Visualization. Interactive breakdown of multi-layer box shadows with exploded view of each shadow component.

Animation Analysis. Visualize CSS animation timing curves and copy animation CSS properties.

CSS Selector Search. Find and highlight elements using CSS selectors to quickly locate specific elements.

X-Ray Mode. Reveal the underlying structure of the page by outlining all elements at once.

Tailwind CSS Generator. Instantly convert any element's computed styles into Tailwind utility classes.

CSS Rules Inspector. View the CSS rules from stylesheets that apply to any element, grouped by source file.

Transition Inspector. Visualize CSS transitions and timing function curves alongside animations.

Canvas Inspection. Inspect HTML5 Canvas elements. View dimensions, context types, and extract color palettes.

Layout Inspection. Visualize Flexbox and Grid layouts with a clear breakdown of alignment, direction, and structure.

Gradient Visualization. Inspect and visualize CSS gradients with a detailed breakdown of color stops and direction.

Breakpoints. Detect and visualize CSS media query breakpoints with colored boundary lines directly on the page.

Page Weight. See exactly what's loaded on any page, broken down by scripts, stylesheets, images, fonts and more.

And More. Pause inspection, keyboard shortcuts, dark mode support, and continuous updates.