Hey Product Hunt! 👋 I’m Leon, the maker of Mensuris. As a frontend developer, I spent way too much time doing the same tedious tasks: opening Chrome DevTools just to check a single padding value, digging through source code to find an SVG, or manually calculating the distance between two DOM elements to make sure they match the Figma file. I built Mensuris to fix this. It’s a Chrome Extension that brings the power of DevTools directly to your screen in a beautiful, visual, and intuitive way. Here is what you can do with a single click: ✨ Extract Styles: Hover over any element to instantly copy its CSS, Tailwind classes, or Design Tokens. 📏 Smart Ruler: Click an anchor element and hover around to measure pixel-perfect distances, margins, and paddings. 📦 Asset Extractor: Instantly scrape and download all images, background graphics, and inline SVGs from a page in a neat .zip file. ♿ A11y Checker: Validate WCAG contrast ratios in real-time. 🦴 X-Ray Mode: Strip away styles to see the raw wireframe and DOM structure of complex layouts. ⚖️ Element Diff: Compare multiple elements side-by-side to debug visual inconsistencies. Pricing & Launch Offer 🎁 Mensuris operates on a Freemium model. You can use the core inspection tools completely for free! For power users, the Pro version unlocks batch asset extraction, code exports, and the element diff tool for a one-time payment of $49.99 (Lifetime License, no subscriptions!). To celebrate our launch, use the code PH20 at checkout for 20% off the Lifetime License! (Discount ends on 14.08.2026) I’d love to hear your feedback, feature requests, or answer any questions you might have. Let me know what you think! 👇

Mensuris

Inspect CSS, extract assets, and measure pixels magically.

Inspect CSS, extract assets, and measure pixels magically.