CSS Custom Property Inspector

About This Product

Ever wasted hours chasing a CSS custom property that was overridden three levels up in the cascade? Meet the CSS Custom Property Inspector – the first dev tool that not only reveals every property but also traces its origin across your entire component tree, so you can stop hunting and start fixing.

Unlike generic inspector panels that only show computed values, this extension gives you a full inheritance chain for each CSS custom property, directly in your developer tools. It integrates with your git workflow to show you exactly when and where a property changed, helping you catch regressions before they hit production. The result: faster debugging, cleaner codebases, and a measurable boost in team efficiency.

## What's Included

- Real-time property tree with full inheritance chain showing cascade origins - Git-aware change log – see who changed which custom property and when - Auto-detect unused custom properties and highlight potential dead code - One-click navigation to the source file and line where a property is defined - Export a complete property map for documentation or design system audits

Key Features

• Ever wasted hours chasing a CSS custom property that was overridden three levels up in the cascade? Meet the CSS Custom Property Inspector – the first dev tool that not only reveals every property but also traces its origin across your entire component tree, so you can stop hunting and start fixing
• Unlike generic inspector panels that only show computed values, this extension gives you a full inheritance chain for each CSS custom property, directly in your developer tools
• It integrates with your git workflow to show you exactly when and where a property changed, helping you catch regressions before they hit production
• The result: faster debugging, cleaner codebases, and a measurable boost in team efficiency
• ## What's Included - Real-time property tree with full inheritance chain showing cascade origins - Git-aware change log – see who changed which custom property and when - Auto-detect unused custom properties and highlight potential dead code - One-click navigation to the source file and line where a property is defined - Export a complete property map for documentation or design system audits ## Who Is This For - CSS architects managing complex custom property systems across hundreds of components - Component library maintainers who need to track property usage and avoid breaking changes - Design system teams that rely on CSS custom properties for theming and want automated audits - Front-end developers debugging cascade issues in large, multi-team projects ## How It Works Install the extension from your browser's store – it works in Chrome, Firefox, and Edge
• Open your developer tools and find the new 'CSS Custom Properties' tab