DevLens — Design Handover Inspector

About

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.