Made to Measure
Built for Everything Else
Used by 50,000+ developers and designers worldwide.
This is the best on-screen roulette/ruler available in the Chrome Store.
Chrome Web Store Review
Everything you need to inspect any website
Element Inspection. View sizes, margins, paddings, tag names, IDs, and classes by hovering over any element.
Distance Measurement. Select an element to measure pixel distances between it and other elements on the page.
Computed CSS. View and copy the computed CSS properties of any selected element directly to your clipboard.
Page Rulers. Horizontal and vertical guides with crosshair for precise measurements across the viewport.
Color Picker. Sample and copy colors from anywhere on the page using the built-in eyedropper tool.
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.
And More. Pause inspection, keyboard shortcuts, dark mode support, and continuous updates.
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.
Chrome Web Store Review
Go Beyond Measuring With Screen Ruler Pro
One-time purchase · 30-day money-back guarantee · Regional pricing available
Asset Extraction. Extract and download images, SVGs, and vector assets directly from any webpage.
Accessibility Issues. Automatically detect and highlight WCAG contrast failures with actionable recommendations.
Responsive Mode. Test designs across different device viewports with an interactive device emulator and custom dimensions.
Floating Inspector. Detailed element properties on hover including position, size, rendered font, and colors.
Color Extraction. Extract and copy color palettes from selected elements with hex, RGB, and HSL values.
Typography Analysis. Analyze and extract all typography styles used in your selection.
Technology Detection. Identify the frameworks, libraries, and tools powering any website with over 150 technologies supported.
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.
Transition Inspector. Visualize CSS transitions and timing function curves alongside animations.
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.
Canvas Inspection. Inspect HTML5 Canvas elements. View dimensions, context types, and extract color palettes.