Frontend Inspector

Inspect any element's design properties. Hover to see colors, spacing, fonts, and dimensions instantly.

Inspect frontend design properties instantly - perfect for designers and product managers. Frontend Inspector is a powerful visual inspection tool that shows you every design detail when you hover over any element on a webpage. No more digging through DevTools - see colors, spacing, fonts, and dimensions instantly with beautiful visual overlays. ✨ KEY FEATURES: Visual Inspection System Hover over any element to see all its properties Blue highlight box shows the exact element boundaries Orange lines display margin spacing Purple dashed lines connect to nearby elements Distance labels show exact pixel measurements Complete visual breakdown of page layout 📌 Pin/Freeze Panel Click the pin button or press P to freeze the panel Scroll through all properties while panel stays in place Click elements to inspect them when panel is pinned Panel follows your mouse in normal mode Smart positioning keeps panel always visible 🎨 Complete Property Panel Dimensions - Width and height in pixels Spacing - Margin and padding for all sides Colors - Background and text colors with HEX codes and visual swatches Typography - Font family, size, weight, and line height Position - Display type, position, and z-index Element Info - Tag name and CSS classes Borders - Border styles and border radius 📏 Distance Measurements Shows distances between sibling elements Horizontal and vertical spacing visualization Automatic detection of nearby elements (within 200px) Connector lines with distance labels Perfect for checking design system consistency ⌨️ Keyboard Shortcuts P - Pin/unpin the inspection panel ESC - Close inspector and return to normal browsing Click (when pinned) - Inspect clicked element 🎯 PERFECT FOR: Designers Check if implementation matches designs Verify spacing, colors, and typography Learn from well-designed websites Quick design QA without DevTools Product Managers Review design implementation quality Verify consistency across pages Check adherence to design systems Communicate specific feedback to developers Developers Debug layout and spacing issues Quickly check computed CSS values Verify responsive designs Learn CSS from existing websites QA Teams Validate design specifications Check cross-browser consistency Document visual bugs with exact measurements Speed up visual regression testing HOW TO USE: Click the Frontend Inspector extension icon Click "Activate Inspector" in the popup Hover over any element on the page See all design properties in the floating panel Click 📌 or press P to pin the panel Scroll through properties or click other elements Press P again to unpin and continue hovering Press ESC when finished VISUAL INDICATORS: 🔵 Blue Box - Current element highlight 🔵 Blue Solid Lines - Element boundaries 🟠 Orange Lines - Margin spacing 🟠 Orange Labels - Margin measurements 🟣 Purple Dashed Lines - Connections to nearby elements 🟣 Purple Labels - Distance to sibling elements