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.
As of June 2026, Measuremate — Pixel Ruler for Web Design has 30,000 users and a 4.37/5 rating from 51 reviews in the Developer Tools category.
Usersno change0%
30.0K
30,000
Ratingdown 2.5 percent−2.5%
4.37
51 reviews
Reviewsup 2.0 percent+2.0%
51
Version
3.2.38.0
Manifest V3
90-day change · In the last 90 days this extension 4 version updates.
History
7 snapshotsTracking since Apr 26, 2026.
View as table
| Date | Users | Rating | Reviews | Version |
|---|---|---|---|---|
| Apr 26, 2026 | 30.0K | 4.48 | 50 | 2.4.0.0 |
| May 2, 2026 | 30.0K | 4.48 | 50 | 3.2.22.0 |
| May 5, 2026 | 30.0K | 4.48 | 50 | 3.2.24.0 |
| May 17, 2026 | 30.0K | 4.40 | 50 | 3.2.24.0 |
| May 23, 2026 | 30.0K | 4.37 | 51 | 3.2.24.0 |
| Jun 6, 2026 | 30.0K | 4.37 | 51 | 3.2.33.0 |
| Jun 15, 2026 | 30.0K | 4.38 | 52 | 3.2.38.0 |
| Now | 30.0K | 4.37 | 51 | 3.2.38.0 |
Changelog
- Jun 6, 2026short_description
Measure distances between any elements on any website. Pixel ruler + CSS inspector for pixel-perfect design handoff.
Measure distances, inspect the box model, drop guides on any live page. A pixel ruler for the web — no DevTools.
- Apr 26, 2026short_description
The ultimate measuring tool for the web
Measure distances between any elements on any website. Pixel ruler + CSS inspector for pixel-perfect design handoff.
- Apr 26, 2026name
Measuremate
Measuremate — Pixel Ruler for Web Design
- Apr 26, 2026description
MeasureMate the ultimate tool for measuring distances between elements on webpages. It lets you just select the element and then check all the distances to any other element. You can select the whole element or only the content box. Unlike some other extensions, it will not interfere with any webpage you visit unless you click the MeasureMate icon. Once installed: Click the icon to activate. Mouse over a document, select the anchor element and move the cursor to any other element. It's only the beginning. In the future, there would be more lot of helpful stuff. Please leave feedback or send me suggestions at [email protected]
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. ━━━━━━━━━━━━━━━━━━━━━━━━ TWO POWERFUL MODES ━━━━━━━━━━━━━━━━━━━━━━━━ 🔍 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. 🖼️ MARQUEE SELECT multiple elements at once by dragging a selection box. 📐 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. ━━━━━━━━━━━━━━━━━━━━━━━━ KEYBOARD SHORTCUTS ━━━━━━━━━━━━━━━━━━━━━━━━ 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 ━━━━━━━━━━━━━━━━━━━━━━━━ WHY MEASUREMATE ━━━━━━━━━━━━━━━━━━━━━━━━ ✓ 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. ━━━━━━━━━━━━━━━━━━━━━━━━ HOW TO USE ━━━━━━━━━━━━━━━━━━━━━━━━ 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 ━━━━━━━━━━━━━━━━━━━━━━━━ All core measuring features are free forever. Pro is a one-time purchase. Buy once, use forever, on any number of computers. ━━━━━━━━━━━━━━━━━━━━━━━━ SUPPORT & FEEDBACK ━━━━━━━━━━━━━━━━━━━━━━━━ Website: https://measuremate.xyz Email: [email protected] We ship updates regularly. Feature requests and bug reports are always welcome.
Permissions & access
- Permissions
- storageactiveTabscripting
- Host access
- None declared
Screenshots
About
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. ━━━━━━━━━━━━━━━━━━━━━━━━ TWO POWERFUL MODES ━━━━━━━━━━━━━━━━━━━━━━━━ 🔍 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. 🖼️ MARQUEE SELECT multiple elements at once by dragging a selection box. 📐 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. ━━━━━━━━━━━━━━━━━━━━━━━━ KEYBOARD SHORTCUTS ━━━━━━━━━━━━━━━━━━━━━━━━ 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 ━━━━━━━━━━━━━━━━━━━━━━━━ WHY MEASUREMATE ━━━━━━━━━━━━━━━━━━━━━━━━ ✓ 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. ━━━━━━━━━━━━━━━━━━━━━━━━ HOW TO USE ━━━━━━━━━━━━━━━━━━━━━━━━ 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 ━━━━━━━━━━━━━━━━━━━━━━━━ All core measuring features are free forever. Pro is a one-time purchase. Buy once, use forever, on any number of computers. ━━━━━━━━━━━━━━━━━━━━━━━━ SUPPORT & FEEDBACK ━━━━━━━━━━━━━━━━━━━━━━━━ Website: https://measuremate.xyz Email: [email protected] We ship updates regularly. Feature requests and bug reports are always welcome.
Technical
- Version
- 3.2.38.0
- Manifest
- V3
- Size
- 504KiB
- Min Chrome
- 88
- Languages
- 1
- Featured
- Yes
Metadata
- ID
- fcbffocoaopnenhgbchlchgndohggdei
- Developer ID
- u0546760eaf0f6bde47d07711a094bf07
- Developer Email
- [email protected]
- Created
- May 25, 2019
- Last Updated (Store)
- Jun 4, 2026
- Last Scraped
- Jun 21, 2026
- Website
- measuremate.xyz
- Support URL
- —
- Privacy Policy
- https://measuremate.xyz/privacy-policy/
Similar extensions
Alternatives to Measuremate — Pixel Ruler for Web Design, ranked by description similarity.
Measure Everything
Element distance measurement tool.
20.0K
★ 4.7
Distance Calculator
A minimal Chrome extension (MV3) with popup, content script and service worker.
12
Measure Pixel
Discover Measure Pixel — the ultimate solution for precise pixel measurements on webpages.
1.0K
★ 4.0
Measure It
Measure It is pixel-perfect page ruler for measuring sizes, distances and positions directly on web pages.
181
★ 5.0
Ruler Measurement
Make your measurement easy with Chrullex (CH-rome RUL-er EX-tension)
20.0K
★ 3.4
Metric Spy Page Ruler
Quickly Measure Elements on Web Pages with a Ruler Tool, Free Selection, and Convenient Keyboard Shortcuts.
10.0K
★ 5.0
The Ruler
A simple and complete ruler to measure viewport distances with pinned guides.
9
Ruler Online
Ruler Online: Measure pixel distances on any webpage instantly. Get precise Ruler Online with Ruler tool for Chrome.
31
Data sourced from the Chrome Web Store · last verified Jun 21, 2026.