CSS Footprint

Track CSS rule changes made in Chrome DevTools Elements → Styles panel using snapshot polling and diffing.

Stop losing your CSS edits! How many times have you found the perfect CSS tweak in Chrome DevTools, only to lose track of exactly which lines you actually changed or which files to update? CSS Footprint is a lightweight developer tool built to solve this exact problem. It silently tracks every CSS edit you make in the Elements → Styles panel and gives you a clean, easy-to-read diff of what was added, modified, or removed. ✨ Key Features: • Live CSS Tracking: Automatically captures any change made in the DevTools Styles pane. • Smart Diffing Engine: Clearly highlights additions (+), modifications (~), and deletions (-) just like Git. • Dynamic Style Support: Intelligently handles dynamically injected <style> tags to avoid collisions. • Noise Reduction: Optionally ignores transient inline styles (like those generated by JavaScript animations) to keep your footprint clean. • Zero Setup: No configuration needed. It just works out of the box. 💡 Tip: Once installed, just open Chrome DevTools (F12) and you'll spot a new "CSS Footprint" tab! 🔒 Privacy First: CSS Footprint runs 100% locally on your machine. It does not collect, transmit, or sell your personal data. No analytics, no tracking, no accounts required.