Listening for changes made to CSS classes in Chrome Devtools

Question

I want to check if someone has modified the CSS rules of an element through Chrome Devtools. Normally MutationObserver would suffice for this, however, MutationObserver is only able to observe changes to the inline style attribute, and cannot detect when the element's CSS properties have been modified through devtools (or if a new rule is added to the inspector stylesheet).

What's the best way to listen for Chrome Devtools's CSS rule changes with JavaScript?

score 1 · Answer 1 · answered Dec 02 '19 at 04:17

My goal was to use this within a Chrome extension. I have just found that listening for user modifications through Devtools is possible with:

//This will only work in the devtools.js file in a Chrome extension
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
 alert(resource.url);
 alert(content);
});

More information is available here.

score -1 · Answer 2 · answered Nov 30 '19 at 23:16

One indirect way to detect initial changes would be via transition events. Of course, this can be bypassed, but then again, everything you do on the frontend can.

The gist of the idea is to add an incredibly short transition to all elements and listen to any transition events fired by it.

let timeout = null;

Array.from(document.querySelectorAll('*')).forEach(element => {
  element.addEventListener('transitionstart', () => {
    if (timeout) return;
    timeout = setTimeout(() => {
      console.log('styles changed');
      timeout = null;
    }, 0);
  });
});

* {
  transition: all 0.0001s;
}

<p>Edit my styles in the console to see messages</p>

Alternatively you could look to find a way to diff computed styles on all elements when certain events are fired, but I can't see a way how that wouldn't be prohibitively expensive to compute.

Listening for changes made to CSS classes in Chrome Devtools

2 Answers2