Measure any distance
Select any element, then hover another to read the pixel distance between them. Rulers along the top and left edges track your cursor with a crosshair.
Measure, inspect & edit
anything on the web
Inspect elements, measure distances, edit pages, and validate designs. Built for developers and designers who live in the browser all day.
Add to ChromeUsed by 60,000+ developers and designers, including teams at
Perfect for web design. Shows properties, elements, measurements, containers and much much more. I love this app so much. Saved me hours of work and guess work.
Inspect any element
Hover any element for a floating inspector with sizes, spacing, typography, and colors. Press Space to pin it and compare elements side by side.
Edit live with change tracking
Edit the page's real CSS rules, rewrite HTML and text in place, and track every change in a diff you can copy or revert with one click.
Works in all modern Chromium browsers
Screen Ruler supports every major Chromium browser with side panel display. One install gives you the same set of tools on every site you visit, with nothing to configure first.
This consolidates multiple extensions into one powerful tool. As a web designer, I can't express just how happy I am that this replaces my need for several standalone browser extensions.
FEATURES
The whole kitchen sink
A ruler, CSS inspector, color picker, font inspector, asset extractor, responsive tester, and live editor. Every one of them, on any page.
Inspect any element
Hover any element for a floating inspector with sizes, spacing, typography, and colors. Press Space to pin it and compare elements side by side.
Responsive mode
Preview a page at several device viewports at once, side by side, and see media query breakpoints visualized.
Colors, styles & assets
Sample colors with the eyedropper, pull full palettes, gradients, and typography styles, and download any image or SVG.
Page audits
Scan any page for WCAG contrast failures and common SEO problems, and identify the technologies it runs on.
Page insights
See what any page is made of: total weight broken down by scripts, stylesheets, images, and fonts, plus meta tags and social previews.
Live editing with change tracking
Edit the page's real CSS rules, rewrite HTML and text in place, and track every change in a diff you can copy or revert with one click.
Distance measurement
Select an element to measure pixel distances between it and other elements on the page.
CSS inspection
View the computed styles and the real CSS rules behind any element, and copy them straight to your clipboard.
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
Rulers along the top and left edges, marked off in pixels, with a crosshair tracking your cursor.
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.
MCP
Give your agent pixel-perfect vision
Connect Screen Ruler to Claude Code, Cursor, Windsurf, and any MCP-compatible client. Then have your agent measure, inspect, and edit any page through a prompt.
npx -y @screen-ruler/mcp
Install Screen Ruler for free
No account, no setup. Join 60,000+ developers and designers measuring, inspecting, and editing on any page.
Add to Chrome