Break when style has changed in Chrome Dev Tools

Question

I just wonder if anyone know if it's possible to add a break point on a specific css property on a specific element in Chrome Dev Tools, i.e when #mydiv's height property has changed, break.

Answer 1

You can only break on all inline style (<div style="height: 20px; width: 100%">) changes using the Elements panel context menu's Break on... | Attributes modifications.

Answer 2

You can do it this way:

function observe(el, property) {
    var MutationObserver = window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log('old', mutation.oldValue, 'new', mutation.target.style.cssText, 'mutation', mutation);
            if (mutation.attributeName == property) debugger;
        });
    }
    );

    var config = {
        attributes: true,
        attributeOldValue: true
    }

    observer.observe(el, config);
}

Then you can set breakpoint on style change like this: observe(element, "style")

It will break when it changes and also print in console old and new value.