Media
2 items
Description
Display CSS properties as overlay and export to Excel Core Features Real-time CSS Inspection Hover over elements to view their CSS properties Shows element dimensions, margins, padding, and font details Visual measurement lines for width and height Non-intrusive overlay display Element Selection Click to pin/select elements Click again to deselect Multiple elements can be selected simultaneously Selected elements maintain their measurements and highlights Visual Measurements Real-time size measurements (width × height) Distance measurements to nearby elements Visual measurement lines with dimensions Automatic positioning of overlays to avoid screen edges 4. Detailed CSS Information Basic info for hovered elements: Element tag name Dimensions Position Margin and padding Basic font properties Additional info for pinned elements: Font weight Line height Letter spacing Distances to nearby elements 5. Performance Optimizations Debounced mouse movement handling Event delegation Limited DOM operations Efficient overlay management Smart element filtering Export Functionality Export CSS properties to CSV format Compatible with Excel Includes element tags, dimensions, and styles Technical Features 1. Non-invasive Implementation Preserves original element styles Restores elements to original state on deselection High z-index overlays to stay on top Responsive Design Adjusts overlay positions based on viewport Handles window scrolling Prevents overlays from going off-screen Error Handling Graceful error recovery Debug logging Clean cleanup on deactivation Usage Click the extension icon to activate Hover over elements to see their CSS properties 3. Click elements to pin their measurements Click again to unpin Click the extension icon again to deactivate Use export feature to save CSS data to CSV The extension is designed to be a professional tool for developers and designers who need detailed CSS information while maintaining good performance and user experience.