CSS Scanner Pro

The fastest and easiest way to inspect, copy and analyze CSS styles on any webpage

### Name CSS Scanner Pro ### Short Description (132 characters max) The fastest and easiest way to inspect, copy and analyze CSS styles on any webpage with syntax highlighting and live editing. ### Detailed Description Inspect, copy, and analyze CSS styles on any webpage instantly with CSS Scanner Pro — the ultimate tool for web developers and designers. 🚀 **KEY FEATURES** ✨ **Instant CSS Inspection** Hover over any element to see its complete CSS styles with beautiful syntax highlighting. 📋 **One-Click Copy** Copy CSS, HTML, or both to your clipboard instantly. No manual selection needed. 🎨 **Syntax Highlighting** Clear, color-coded output makes reading CSS a breeze. Professional code presentation. 👶 **Include Children CSS** Extract nested component CSS with one click. Get complete UI components with all their styles. ✏️ **Live CSS Editor** Edit and apply styles in real-time. See changes instantly without leaving the page. 🖼️ **CodePen Export** Export any component to CodePen with one click. Perfect for sharing and prototyping. ⚡ **Optimized Output** Clean, compressed CSS with shorthand properties. No bloat, just what you need. 📐 **Grid Overlay** Toggle a visual grid overlay to inspect layouts and alignment. 📌 **Pin Inspector Mode** Freeze the inspector to examine elements without moving your mouse. 🔍 **Parent Element Scanner** Navigate up the DOM tree to inspect parent elements easily. 🌍 **Multi-language Support** Available in English, French, Spanish, and German. ⌨️ **KEYBOARD SHORTCUTS** • Activate Scanner: `Ctrl+Shift+S` (Windows/Linux) or `Cmd+Shift+S` (Mac) • Toggle Grid Overlay: `Ctrl+Shift+G` (Windows/Linux) or `Cmd+Shift+G` (Mac) • Scan Parent Element: `Ctrl+Shift+E` (Windows/Linux) or `Cmd+Shift+E` (Mac) • Freeze/Unfreeze: `Space` • Close Scanner: `Esc` 🎯 **PERFECT FOR** • Web Developers inspecting CSS • Designers analyzing styles • Students learning web development • Anyone debugging layout issues • Developers copying component styles 🔒 **PRIVACY FIRST** • No data collection • No external servers • No tracking or analytics • Works completely offline • All processing happens locally in your browser 💡 **HOW TO USE** 1. Click the extension icon or press `Ctrl+Shift+S` / `Cmd+Shift+S` 2. Hover over any element on the page 3. View CSS in the inspector panel 4. Click "Copy" to copy styles 5. Use the Editor tab for live changes 6. Export to CodePen if needed 🎨 **FOUR POWERFUL TABS** • **CSS Tab**: View all computed CSS properties • **HTML Tab**: See the element's HTML structure • **Source Tab**: View original stylesheet rules • **Editor Tab**: Edit and apply CSS in real-time ⚙️ **CUSTOMIZABLE SETTINGS** • Choose selector mode (smart, original, none) • Include/exclude child elements • Copy options (CSS only, HTML only, both) • Grid overlay preferences • Language selection • And more... Created by Simon Adjatan | MIT License | Open Source ---