DevLens — Design Handover Inspector

Stop guessing pixels. Inspect any element's box model, typography, colors, spacing, and layout properties.

Stop switching between browser DevTools and your design specs. DevLens gives you a clean, visual inspector that shows exactly what developers need — no digging through computed styles. 🔍 One-Click Element Inspection Hover over any element to see its box model, spacing, typography, and colors in a clean side panel. Click to lock the selection and explore every detail. 📏 Measure Distances Shift+click any two elements to see the exact pixel distance between them — with visual connectors drawn right on the page. 🎨 Color Palette Extraction Scan any page and get every unique color, organized by type (backgrounds, text, borders). Copy any value in HEX, RGB, or HSL. 📐 Box Model Visualization See margin, padding, and content dimensions as a live overlay — just like Figma's inspect mode, but for any live website. 🔄 Pseudo-State Inspector Force :hover, :focus, :active, and :visited states on any element to inspect styles that only appear on interaction. 📋 Export Specs Copy a clean Markdown specification of any element to your clipboard — ready to paste into Jira, Notion, Linear, or Slack. 🌲 Element Tree Navigation Browse the DOM with a clickable breadcrumb trail. Navigate up and down the tree without leaving the inspector. 🖼️ Asset Extraction List and download all images, SVGs, and assets from any page with one click. ⌨️ Keyboard Shortcuts Ctrl/⌘ + Shift + D — Toggle inspector Ctrl/⌘ + Shift + M — Toggle measure mode Built for the modern dev workflow. Whether you're building with Lovable, Bolt, v0, or inspecting any live site — DevLens gives you the design specs you need in seconds. Lightweight. No permissions beyond the active tab. No data collection. No account required.