Simple Ruler Beta

Measuremate — Pixel Ruler for Web Design

Measure distances, inspect the box model, drop guides on any live page. A pixel ruler for the web — no DevTools. Measure distances between any elements on any website. Pixel ruler, CSS inspector, and alignment guides — everything you need for pixel-perfect design handoff, right in your browser. Measuremate is a measuring tool built for frontend developers, web designers, and QA engineers who need precise pixel measurements without leaving the browser. Lightweight, private, and fast. 🔍 INSPECTOR MODE — Click any element to inspect it. See dimensions, distances to neighboring elements, and full CSS details. Hover to preview before selecting. 📐 GUIDES MODE — Place vertical and horizontal ruler guides anywhere on the page. Snap to element edges, measure between guides, and verify alignment like in Figma. Switch between modes with a single keystroke. ━━━━━━━━━━━━━━━━━━━━━━━━ WHAT YOU CAN DO ━━━━━━━━━━━━━━━━━━━━━━━━ 📏 MEASURE DISTANCES between any two elements — spacing, gaps, padding, margins. On-page dimension lines show exact pixel values. 🎯 INSPECT THE CSS BOX MODEL with visual breakdown of content, padding, border, and margin (including negative margins). 🔬 VIEW DETAILED CSS by category — Layout (display, position, flex, grid, z-index), Text (font, color, line-height, letter-spacing), and Attributes. 🌳 NAVIGATE THE DOM TREE — browse from root to any element, hover to preview, click to inspect. 📐 DROP VERTICAL OR HORIZONTAL GUIDES on any page with a single keystroke. Use arrow keys for 1px precision, Shift+arrows for 10px jumps. 🧲 SNAP TO ELEMENTS — guides and cursor automatically snap to element edges and centers. Cmd+Shift+M (Mac) / Ctrl+Shift+M (Win) — Toggle Measuremate on/off 1 — Switch to Inspector mode 2 — Switch to Guides mode M — Show/hide the control panel V — Drop a vertical guide at cursor H — Drop a horizontal guide at cursor S — Toggle snap-to-alignment Q — Clear all guides Arrow keys — Move cursor/guides 1px (Shift for 10px) Esc — Clear selection ━━━━━━━━━━━━━━━━━━━━━━━━ WHO IT'S FOR ━━━━━━━━━━━━━━━━━━━━━━━━ • Frontend developers verifying pixel-perfect implementation against designs • Web designers checking spacing, alignment, and typography on live sites • QA engineers validating responsive layouts across breakpoints • Teams doing design handoff from Figma, Sketch, or other design tools • Anyone who needs a fast, clean ruler for the web ✓ Clean UI — does nothing until you activate it. No interference with the pages you browse. ✓ Lightweight — under 500 KiB, no bloat, no telemetry. ✓ Privacy-first — zero tracking, zero data collection. ✓ Works on any website, including SPAs and iframes. ✓ Figma-like distance measurements you already know how to read. ✓ Keyboard-first workflow for power users. 1. Click the Measuremate icon in your toolbar (or press Cmd/Ctrl+Shift+M) to activate 2. Hover over any element to preview its dimensions 3. Click to select — see distances to nearby elements appear on the page 4. Open the Main Panel with M to see full CSS, box model, and DOM tree 5. Press 2 to switch to Guides mode and drop alignment rulers ━━━━━━━━━━━━━━━━━━━━━━━━ FREE AND PRO ━━━━━━━━━━━━━━━━━━━━━━━━ We ship updates regularly. Feature requests and bug reports are always welcome.

Measure Everything

Measure Everything is a powerful tool for measuring distances between DOM Elements on a webpage. Just click an element and then hover your mouse pointer over another element in order to get instant distance measurements. You need to activate the extension by clicking on its icon before using it or pressing the hotkey Alt+Shift+M. Consider pinning the icon of this extension for easier use. Any feedback and reviews are welcome.

Simple Ruler

A very simple ruler to check your webpage, without ads, without secrets, just a ruler. Check the measures of components can be easier than open the dev tools and check the size of a component. With the simple ruler extension, you just click and move your mouse over the components to see the width and height.

Designer Tools

A collection of tools to help you design and develop websites with precision. Designer Tools helps web designers and developers achieve pixel-perfect results with ease. It includes features like rulers, guidelines, and multiple ways of measuring elements and spacing. You can customize your setup with grids, move or remove guides, and tweak settings to match your workflow. PLUS subscribers gain access to extra tools and resources to enhance their design process.