Is it possible to see all edited styles in Firefox developer tools?

Question

My preferred CSS workflow (at least when tweaking existing CSS) is to edit directly in the browser using the 3-panel Inspector panel, then copy the edited styles to my stylesheet.

Sometimes I'll edit the styles for many elements and forget that I edited some element (since you can only see if it's edited AFAICT by selecting exactly that element and looking for rules with a green bar to the left). Then I'll fail to manually copy that element's style changes to my stylesheet and, on reload, lose the changes.

Is there somewhere I can see all the places where I've edited styles using Inspector -- including adding new rules -- so that I can copy them all at once?

Answer 1

This is currently only available in Firefox Nightly. In about:config set devtools.inspector.changes.enabled to true. This will create a "Changes" tab in the dev tools with a Git-like panel showing all your changes.