Media
4 items
Description
Pixel-perfect Image Mockup Diff, Box Model Measure, Eyedropper & Token Matcher, WCAG Contrast Checker & Grid Inspector. Pixel-perfect design QA, right on the page. DevLens Design QA helps developers and designers compare what was built with what was designed: overlay the mockup, measure the spacing, check the colours and test the breakpoints. MOCKUP OVERLAY • Drop or paste a PNG, JPG or WebP exported from your design tool • Set opacity, use normal or difference blend, and nudge the position 1 px or 10 px at a time • 1x or 2x render scale for retina exports • Overlay position is remembered per page MEASURE • Hover any element to see its box model: content, padding, border and margin in pixels • Computed font family, size, weight, line height and colour COLOUR AND CONTRAST • Eyedropper to pick any colour on screen, shown as HEX, RGB and HSL • Match picked colours to your own design tokens (paste name → hex pairs) • WCAG contrast checker with AA and AAA results for normal and large text GRIDS AND VIEWPORTS • Column grid overlay (columns, gutter, margin) and an 8 px baseline grid • One-click viewport widths: 320, 375, 768, 1024, 1280 and 1440 px, or a custom width PRIVATE BY DESIGN • In-page tools live in an isolated Shadow DOM, so page styles never leak in or out • Site access is optional and granted per site • Your mockups never leave your device. No accounts, no analytics, no network requests Part of DevLens, a set of focused, offline developer tools for Chrome.