Better Ruler users statistics

A page ruler which can snaps around web elements for easier measurement. Provide convenience for front-end development and ui design

A smart web ruler with element snapping for easier frontend development and UI design.

✨ Features

• Smart Snapping: Hold Alt (or Option on Mac) while moving the cursor to automatically detect and snap to web elements. Supports snapping to edges, 4 corners, and 4 edge midpoints, displaying dimensions instantly. The snap preview uses a contrasting color to distinguish from measurement boxes.
• Easy Measurement: Click and drag to create a measurement layer that snaps to element edges automatically.
• Flexible Editing: Double-click any layer to enter edit mode: move, resize, or fine-tune.
• Arrow keys: Nudge position by 1px (Shift for ×10, Alt + arrows to resize)
• Esc: Exit edit mode
• Backspace: Delete the selected layer
• Box-to-Box Snapping: While drawing or dragging, boxes snap to the edges of other measurement boxes, making it easy to continue measuring from a previous boundary.
• Auto Restore: Re-activating the extension after a page reload restores the measurements drawn on that page (within the browser session).
• Status Indicator: The extension icon changes based on status (colored = active, gray = inactive) for easy identification.
• Shortcuts Help: Hover over the ? button in the toolbar to view all available shortcuts.
• Customization:
• Individual Colors & Opacity: Each measurement box can have its own color and opacity; editing when selected only affects the current item
• Global Mode: When enabled, changing color or opacity affects all existing measurement boxes simultaneously
• Single Mode: When enabled, only one measurement box can exist at a time; new boxes automatically clear old ones
• Size Position: Configure where dimension labels appear (center, corners, etc.)
• Dashed Background: Choose between solid or dashed background for measurement boxes
• Reference Lines: Automatic horizontal and vertical reference lines with X, Y coordinate labels
• Crosshair Display: Configure mouse crosshair display mode
• Quick Controls:
• Press f (configurable): Toggle toolbar visibility
• Press r (configurable): Toggle reference lines
• Press s (configurable): Toggle snap mode (when on, snapping is always active without holding Alt; Alt temporarily disables snapping)
• Press Shift: Toggle dimension labels
• Ctrl+Z / Cmd+Z: Undo (supports draw, delete, move, resize operations)
• Ctrl+Shift+Z / Cmd+Shift+Z: Redo
• Alt + z (customizable): Global shortcut to toggle the extension
• Double-press z (configurable): Quickly activate/deactivate within the page (after first launch)
• Copy Dimensions: Click the dimension label on any measurement box to copy its size to clipboard, with configurable format (320 x 180 / CSS / with position / rem).
• Toolbar Hint: A toast notification shows how to restore the toolbar after hiding it.
• Shadow Color: The snap preview color is independently configurable, no longer derived from the measurement box color.
• Local File Support: Enable "Allow access to file URLs" in chrome://extensions to measure local HTML files.
• Mobile Simulation: Works in DevTools mobile simulation mode (ensure device type is set to no touch).