~/work/css-footprint
CSS Footprint
A Chrome DevTools extension that records every CSS change you make in the Styles panel as a Git-style diff. Everything stays on your machine.
01The problem
When I was a junior frontend developer I spent hours tweaking styles in the Chrome inspector. Then one misclick, a closed tab or a refresh, and all of it was gone. I had no record of what I'd tried.
That idea stuck with me for years. So much real styling work happens in DevTools, during implementation, bug fixes, support and UAT, and it's the one place with no history.
02The approach
I built the tool I wanted back then. You open DevTools and your changes are already there.
- It takes snapshots of the Elements → Styles panel and diffs them, so it catches everything you change.
- Additions, changes and deletions show up the way they do in a Git diff, including style tags that get injected at runtime.
- There's nothing to set up. Install it, press F12 and open the CSS Footprint tab.
03Key decisions
It's a small tool, and I kept it that way on purpose.
- 01
Local only
Everything is saved in the browser's local storage. There are no servers, no analytics and no account, so it's safe to use on client projects and on localhost.
- 02
Only your changes
You can ignore inline styles that come and go, like the ones JavaScript animations write every frame, so the diff only shows what you actually changed.
- 03
One permission
It only asks for storage, to keep your change history between sessions.
04Results
My colleagues use it every day for implementation and bug fixing, mostly because nothing gets lost anymore.
- 100%Runs locally
- 0Data collected
- 1Permission requested