Is there another way aside from polling to detect which class styles are changed in Chrome's dev tools?

Question

I know I can use MutationObserver for inline styles, but I'm wondering if there's a way to detect if an external class style has been changed with chrome's dev tools and what the change was. In this example changing the font color to that shade of green:

This is the best I was able to come up with. https://jsfiddle.net/cotssc7e/

var elem1 = document.getElementById("elemId");
var this_id = $('#elem-container').attr('id');
var style = window.getComputedStyle( document.getElementById(this_id), "")

  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("color");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  setInterval(function() { getTheStyle() }, 1000)

I've used MutationObserver like this:

var MutationObserver = window.MutationObserver;

var target = document.querySelector('#page');
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });    
});
var config = { attributes: true, childList: true, characterData: true, attributeOldValue: true, subtree:true, attributeOldValue:true, characterDataOldValue:true  }
observer.observe(target, config);

But if you look at the original photo, MutationObserver won't detect a class style change from dev tools, because I suppose the DOM html doesn't change. I tried running MutationObserver on the css itself, but chrome doesn't literally change the css, they only change the computedStyle. And how and what changed is what I'm trying to figure out.

So what is the question exactly? You know you can use MutationObserver and you have code that polls every second.... What are you actually trying to solve? — epascarello, Sep 07 '16 at 22:22
I'm trying to simply return whichever class was changed and in what way. — Squirrl, Sep 07 '16 at 22:25
Polling may be the *only* way to detect CSS changes in all their variants. — Ouroborus, Sep 07 '16 at 22:30
Is there a way to detect which element has been selected, so I could atleast just detect CSS changes within that element? — Squirrl, Sep 07 '16 at 22:34
Is writing a chrome extension my best option? https://developer.chrome.com/extensions/devtools — Squirrl, Sep 07 '16 at 22:50

Rob M. · Answer 1 · 2016-09-08T17:47:46.503

1

If you are just wondering if Chrome's dev tools have a mechanism for checking if nodes/attributes have changed, then the answer is yes! Navigate to the Elements pane, right-click on the desired node and select Break on... > Attributes Modifications.

If you are wanting to do this programmatically, you can use a MutationObserver, here is a slightly modified version of the MDN example:

var target = document.getElementById('example');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if(mutation.attributeName === 'class') {
     console.log('Class changed!!', target.classList.value)
    }
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: false, characterData: false };

// pass in the target node, as well as the observer options
observer.observe(target, config);

setTimeout(function() {
 target.classList.add('two');
}, 3000);

.one {
  width: 200px;
  padding: 20px;
  background-color: green;
}

.two {
  color: white;
}

<div id="example" class="one">
  Hello
</div>

Instead of polling for style changes, you could set the MutationObserver on some parent element (e.g. <body>) and add { subtree: true, attributes: true } to your config instead of polling. You could use the mutation event (and still watch for attributes type mutations) to trigger your code instead of polling every 100 milliseconds.

edited Sep 08 '16 at 17:47

answered Sep 08 '16 at 16:41

Rob M.

35,491
6
51
50

Is there a way I can detect this with my javascript? I would ultimately like some function that returns the element, and the properties changed. (i.e. `.dog{ 'height':'200%'} ` – Squirrl Sep 08 '16 at 16:52
Updated my answer with example of programmatic change detection – Rob M. Sep 08 '16 at 17:24
No, this only detects physical changes in the DOM, so it'll work with inline styles or adding a class like u did, https://jsfiddle.net/0c99dbkw/ but MutationObserver won't detect changes in computedStyles which I suppose is the way chrome is doing it. I think I may only be able to detect changes such as .someClass{'color':'red'} if I make an extension to dev tools, or if I loop through all the class attributes looking for a change. Is that true? – Squirrl Sep 08 '16 at 17:33
Updated my answer again with an option for bypassing polling. – Rob M. Sep 08 '16 at 17:48
Thanks so much, but if you check my updated answer I think MutationObserver won't fire when computedStyles are changed by dev tools. – Squirrl Sep 08 '16 at 17:57
It seems to work: https://jsfiddle.net/Lbq0fjvy/ (note that I added `{ characterData: true }` as well) – Rob M. Sep 08 '16 at 18:01
It still doesn't log any changes to a class color, or any other styles. Look at photo above. – Squirrl Sep 08 '16 at 18:06

Is there another way aside from polling to detect which class styles are changed in Chrome's dev tools?

1 Answers1