Detecting and observing changes made to stylesheets in Chrome Devtools

Question

What I want to do is detect style changes made by using the Chrome devtools (made either by modifying existing rules or creating ones) so that in my web application I can persist those changes by saving them.

The only way I can think of so far is to loop through all the elements and get their computed style, however this method wouldn't work properly for classes. Unless there's some way to get the style information for a class without it actually being assigned to an element - or looping through all the known classes, applying it to an element and using its computed style? Either way this seems like a really hacky solution and I'm wondering if there's a better way to handle this.

I should clarify - I don't want to save the changes as complete files using the devtools itself. I want to track individual changes only and in the context of the application itself from javascript. This is not a duplicate of the linked question.

So user opens up dev tools, makes a change to a style, the javascript running in my application wants to know what style was changed and how without any extra end-user steps.

Answer 1

It is possible to do so as per this answer. It suggests using a MutationObserver to listen for changes.

Alternatively, since this question is specifically about the Chrome Devtools, it might make sense to make a chrome extension that hooks into the chrome.debugger API. This would of course mean that detection would be limited to people with the extension, but could give you a great deal of flexibility.