Media
3 items
Description
Professional CSS inspector with real-time editing, applied rules, pseudo-states, media queries, DOM tree, and more Aperture CSS is a professional CSS inspector and editor for Chrome. Inspect any element, edit styles in real-time, and analyze CSS rules — all without opening DevTools. FREE FEATURES: - Real-Time Style Editing — Click any CSS value to edit it live. Changes apply instantly. Use arrow keys to scrub numeric values. - Box Model & Layout — Interactive visualization with editable margin, padding, border, and content dimensions. - DOM Navigator — Visual DOM tree with search, virtual scrolling, and click-to-select navigation. - Pseudo-State Forcing — Force :hover, :active, :focus, :visited states on any element. - Element Pinning — Pin your selection to keep inspecting while interacting with the page. - Copy CSS — Copy all non-default computed styles for any element to your clipboard. PRO FEATURES (license key required): - Applied CSS Rules — See every CSS rule that applies, grouped by stylesheet, with overridden properties struck through. - Computed Styles — Search and filter all computed styles. See the final resolved value for every property. - Specificity Analysis — Visualize selector specificity with bar charts. Identify conflicting rules instantly. - Color Palette — Extract every color on the page. Full color picker with HEX, RGB, HSL, HWB and eyedropper. - Font Detection — Identify fonts in use, font stacks, weights, sizes, and line heights. - Asset Extraction — Browse all images, SVGs, and background images. Preview, copy URLs, or download. BUILT FOR PERFORMANCE: - Zero runtime dependencies — pure vanilla JavaScript - Only activates when you toggle it on - Lightweight injection with no impact on page load HOW TO USE: 1. Click the extension icon or press Ctrl+Shift+C (Cmd+Shift+C on Mac) 2. Hover over any element to see its details 3. Click to select and open the inspector panel 4. Edit styles, analyze rules, and explore CSS PRO ACTIVATION: Purchase a license at https://aperturecss.com/, then enter your key in the extension popup to unlock all tabs. KEYBOARD SHORTCUTS: - Ctrl+Shift+C — Toggle inspector - Alt+↑/↓ — Navigate parent/child elements - ↑/↓ — Adjust values ±1 (Shift for ±10) - Ctrl+Z — Undo element delete - Esc — Close panel