DevTools Changes Tab

I often edit css directly from the chrome dev tools to quickly test things and find the right value. This works great for changes to a single class / value but when testing bigger changes I quickly loose track of which values I changed when actually implementing the changes in code.

Fortunately the dev tools have a changes tab that keeps track of everything that was changed through the dev tools. You can open it by typing Cmd+Shift+P in devtools and searching "changes".

https://developer.chrome.com/docs/devtools/changes/

Depending on your project setup you might even be able to save your changes from the devtools to your project: https://developer.chrome.com/docs/devtools/workspaces/ This didn't work for my nextjs project though.