7

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.

PhonicUK
  • 13,486
  • 4
  • 43
  • 62
  • 1
    Seems to be answered already http://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools – Ananthu R V Jan 31 '17 at 05:13
  • @AnanthuRV No this isn't a duplicate - I don't want to use the chrome dev tools to save the changes, I want **my app** to detect the changes and be aware of them, not just a dumb save of the changes via the dev tools so the app itself knows what the changes are. – PhonicUK Feb 06 '17 at 18:03
  • You can easily see the changes by using a diff tool and compare the original and the modified file. – Håken Lid Feb 06 '17 at 23:50
  • 1
    I need **from the javascript in my application** to detect the changes, within the context of the javascript running in the browser **NOT** externally! – PhonicUK Feb 10 '17 at 16:08
  • 1
    Agreed - this is not a dupe; target question doesn't ask how to track and the answers there don't tell you how to track/observe, only record/save to a file for later changes. – TylerH Nov 14 '17 at 21:00
  • chrome dev tools **does not make changes to stylesheets**, it adds/modifies properties of the style HTML _attribute_. I was going to suggest using MutationObserver Object, but that does not detect the changes made inside the dev tools. – Randy Casburn Oct 16 '18 at 13:55
  • While technically true it does give the appearance of such. It also adds an extra invisible CSS file and puts any selector based changes in there. – PhonicUK Oct 16 '18 at 20:48
  • Possible duplicate of https://stackoverflow.com/questions/27187261/how-to-listen-in-on-dom-changes-that-you-make-with-chrome-developer-tool. Every change you make from the Developers Tools can be tracked by a Mutation Observer. The problem is how do you understand if the changes are made through Developer Tools or by your own code. If your javascript is doing nothing but initializing a Mutation Observer, then you can infer that the end user is making the changes. – Giorgio Tempesta Oct 17 '18 at 15:36
  • The *inspector-stylesheet*, generated at `inspector://page_url/inspector-stylesheet` is not accessible to your scripts. It is not part of the `document.styleSheets` and for all your page is concerned, it is just the same as the *user-agent-stylesheet*. So no way to *listen* for changes. Remains polling (ugh...), or implement the dev-tools yourself (see e.g [dead firebug-lite project](https://getfirebug.com/releases/lite/1.2/)) – Kaiido Oct 19 '18 at 06:01

2 Answers2

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.

Bronzdragon
  • 345
  • 3
  • 13
1

I quote @Bronzdragon answer for the following reasons.

In this context, You have to use the CSS Object Model (CSSOM). Regarding The CSSStyleSheet interface:

As the document.styleSheets list cannot be modified directly, there's no useful way to create a new CSSStyleSheet object manually (although Constructable Stylesheet Objects might get added to the Web APIs at some point). To create a new stylesheet, insert a or element into the document.

so apparently there are no ways to define setters functions in order to track the property changes of the CSSRule objects.

Otherwise, the modern-better-way to observe objects seems to be Proxies, that forces the script to make changes to the proxy itself. So, without access in some way to the browser behavior (in this case The Chrome Web Tools actions), there is no way to set-up the BROWSER → PROXY → CSSRule filter for tracking the changes.

Last chance

I don't want to go deep without reason into the JSON.stringify() of the CSS Object Model and try to find out some kind of string diff o something like this, with a lot of loops and no way to use JavaScript API.