I’ve been doing a lot of work on my Chrome extension, DayWatch, lately. Having my own extension open up whenever I open a new tab is great because it’s exactly the way I want it, but the other edge of the sword is that whenever I see something not right I have to dive in and fix it.

Being a website is great though. I can pop open the DevTools whenever I want and make little tweaks to the CSS, adding a bit of padding here and removing some margin there to make it look exactly right. The only problem is that after I have it looking how I want, I can’t remember all of the changes I made across all the different elements to put it into the stylesheet. I also mess with the :hover state so it’s all tucked away.

I knew there must be a way to see all the changes I’d made and after a bit of hunting I found this page on DevTools Tips.

There’s a Changes panel which you can access in Chrome/Edge with ctrl+shift+P or cmd+shift+P and in Safari in the Inspector.

DevTools Tips is an awesome website actually. I use the Chrome DevTools everyday but I barely scratch the surface of the features available.