Web Ruler

Measure the web. See sizes, distances, margins and paddings of any element on any web page.

Web Ruler is the perfect companion for web developers and designers. Once activated, Web Ruler allows you to view the sizes, margins, paddings, tag names, IDs, and classes simply by hovering over any element. You can also select an element to measure distances to other elements. Moreover, Web Ruler enables precise alignment of elements by offering the ability to create draggable vertical rules that snap to the sides of elements. This extension requires a one-time payment. USAGE: - Toggle Web Ruler by clicking the extension icon, selecting “Web Ruler” from the right-click context menu, or using the shortcut Alt/Options + R. - Hover over elements on web pages to display their sizes, margins, paddings, tag names, IDs, and classes. - Select an element by clicking on it. To deselect, click again or press Escape. - To select the parent of an element, press the Up Arrow key, moving your selection to the parent element instead. - Add a draggable vertical rule by holding Shift and clicking anywhere on the page. Drag the rules left or right; they will snap to the sides of elements. To remove a rule, Shift + Click on it again. WEB RULER IS PERFECT FOR: - Developers: Spotting layout issues or identify alignment problems. Whether you're tweaking margins and paddings, or just making sure everything lines up correctly, Web Ruler becomes an indispensable addition of your development toolkit. - Designers: Ensure your designs have been implemented with pixel-perfect accuracy. Web Ruler acts as a bridge between design and development, allowing you to check is every element aligns exactly as you intended.