Mesurer

Measure and align elements on any website.

Mesurer is a lightweight on-page measurement tool for designers and design engineers. Click the extension icon to toggle an interactive overlay and inspect layout, spacing, typography, color, and structure directly in your browser. **What you can do:** - Measure element width and height instantly - Add and drag horizontal or vertical guides - Style guides with color, weight, dashed or dotted patterns, and opacity - Create guides directly from the top and left rulers - Keep rulers, guides, and selections visible while you edit Settings - Measure distances between elements and guides with Option/Alt - Pin distance overlays while comparing multiple areas - Inspect typography styles with Text Inspector - Sample colors with hex, rgb, hsl, and oklch output - Reveal page structure with X-ray mode - Save your Settings across sites and tabs - Optionally keep guides and measurements after a reload - Toggle Mesurer on or off with a single click **Why Mesurer:** - Fast workflow with a minimal toolbar - Built for UI QA, visual debugging, and implementation checks - Works directly on the page you are inspecting - Supports modern web layouts, including Shadow DOM and embedded frames - No account required **Permissions:** - `activeTab` and `scripting` are used only to run Mesurer on the tab you click - `storage` is used only to save your Settings and optional workspace data on your device - Mesurer does not require broad, always-on access to all tabs - Mesurer does not collect or transmit your page content