Css Scanner Pro

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 & JSFiddle Export
Export any component to CodePen or JSFiddle with one click. Perfect for sharing and prototyping.

SCSS Export
Convert CSS to nested SCSS with auto-generated variables. Copy to clipboard in one click.

CSS Variable Inspection
See custom properties defined on elements and their resolved values. Track variable inheritance.

Specificity Calculator
View selector specificity weights in the Source tab. Understand which rules take priority.

Animation & Transition Inspector
View transitions, animations, and @keyframes rules applied to any element.

Box Model Visualization
See margin, border, padding, and content dimensions in a visual diagram.

Color Palette Extraction
Detect all colors used on an element. Click any swatch to copy the color value.

Light & Dark Theme
Switch the inspector between dark and light themes to match your preference.

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.

Responsive Breakpoint Indicator
See the current viewport breakpoint (xs/sm/md/lg/xl/xxl) in the inspector header. Media query badges in the Source tab show which @media rules are active or inactive.

Enhanced Keyboard Navigation
Switch tabs with number keys (1-4), navigate siblings with Left/Right arrows, quick copy with Ctrl+C, and cycle through CSS sections with Tab/Shift+Tab.

Performance Optimized
Smooth inspection powered by requestAnimationFrame throttling, stylesheet caching, lazy tab updates, and computed style caching.

Multi-language Support
Available in English, French, Spanish, German, Portuguese, and Japanese.

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)
- Switch Tabs: 1 (CSS), 2 (HTML), 3 (Source), 4 (Editor)
- Navigate Siblings: Arrow Left / Arrow Right
- Quick Copy: Ctrl+C / Cmd+C
- Cycle Sections: Tab / Shift+Tab
- 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 or JSFiddle if needed

FOUR POWERFUL TABS

- CSS Tab: View all computed CSS properties, variables, animations, box model, and colors
- HTML Tab: See the element's HTML structure
- Source Tab: View original stylesheet rules with specificity badges
- 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
- Light or dark inspector theme
- Language selection
- And more...

Created by Simon Adjatan | MIT License | Open Source