Screen Ruler

Screen Ruler Pro is available on the Chrome Web Store

This license unlocks advanced inspection tools and measurement features in Screen Ruler Pro, a browser extension for web developers and designers.

What You Get:

• Floating Inspector: See detailed properties when you hover, including position, size, rendered font, colors and more.
• Accessibility Issues: Automatically detect and highlight WCAG contrast failures in your selection with actionable recommendations.
• Responsive Mode: Test your designs across different device viewports with an interactive device emulator and custom dimensions.
• Box Shadow Visualization: Interactive breakdown of multi-layer box shadows with an exploded view.
• Animation Analysis: Visualize CSS animation timing curves and copy animation properties.
• Asset Extraction: Extract and download images, SVGs, and vector assets.
• Color Extraction: Extract and copy color palettes from selected content with hex, RGB, and HSL values.
• Layout Grid Overlay: Overlay a customizable layout grid for perfect design alignment.
• CSS Selector Search: Find and highlight items using CSS selectors.
• Typography: Analyze and extract all typography styles used in your selection.
• X-Ray Mode: Reveal the underlying structure of the page by outlining all content.
• Technology Detection: Detect frameworks and libraries on the current page.

About Screen Ruler Pro

Screen Ruler Pro is the essential measurement and inspection tool for web professionals. Measure distances, inspect CSS properties, extract assets, and capture screenshots.

Core Features

• Measure distances, margins, and padding between any elements
• Navigate page structure with parent/child element selection
• View computed styles, fonts, colors, and layout properties
• Click to select elements and see comprehensive details
• Capture perfectly cropped screenshots of selected elements

Advanced Inspection

• Floating Inspector: See detailed properties when you hover, including position, size, rendered font, colors and more.
• Accessibility Issues: Automatically detect and highlight WCAG contrast failures in your selection with actionable recommendations.
• Responsive Mode: Test your designs across different device viewports with an interactive device emulator and custom dimensions.
• Box Shadow Visualization: Interactive breakdown of multi-layer box shadows with an exploded view.
• Animation Analysis: Visualize CSS animation timing curves and copy animation properties.
• Asset Extraction: Extract and download images, SVGs, and vector assets.
• Color Extraction: Extract and copy color palettes from selected content with hex, RGB, and HSL values.
• Layout Grid Overlay: Overlay a customizable layout grid for perfect design alignment.
• CSS Selector Search: Find and highlight items using CSS selectors.
• Typography: Analyze and extract all typography styles used in your selection.
• X-Ray Mode: Reveal the underlying structure of the page by outlining all content.
• Technology Detection: Detect frameworks and libraries on the current page.

Perfect For

• Web Developers: Debug layouts, inspect CSS, and measure spacing without DevTools
• UI/UX Designers: Extract assets, grab color palettes, and verify design implementations
• Front-end Teams: Quality assurance testing and pixel-perfect development
• Design Agencies: Analyze competitor sites and extract design elements

License Terms

Each license is limited to 3 activations. If you buy a package of licenses (5, or 10), they share the same key but can simultaneously activate it 15, or 30 times. License keys are for personal or private use. If shared publicly, they will be deactivated.