aeeble

Screen Ruler is a Chrome extension designed for web developers and designers to measure sizes, distances, margins, and paddings of any element on a web page. It provides a simple and intuitive way to validate website implementations by hovering over elements to display their sizes, margins, paddings, tag names, IDs, and classes.

Key Features

• Measure the pixel size of any element
• Measure the pixel distance between any two elements
• View HTML tag names, class names, and IDs
• Parent/child selection shortcuts
• Responsive selections resize with your browser window
• Computed CSS inspection
• Copy CSS to clipboard

Usage

1. Toggle Screen Ruler by clicking the extension icon or using the shortcut Alt/Option + Shift + R.
2. Hover over elements to display their sizes, margins, paddings, tag names, IDs, and classes.
3. Select an element by clicking on it to turn the highlight red.
4. Use Alt/Option + Up or Alt/Option + Down to select the parent or child element.
5. View the computed CSS of the selected element in the side panel.

Screen Ruler also offers a PRO version with additional features such as Floating Inspector, Box Shadow Visualization, Animation Analysis, Asset Extraction, Color Extraction, Layout Grid Overlay, Element Screenshots, CSS Selector Search, Typography Analysis, and X-Ray Mode.