Frontend Inspector

About

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