Chrome - Break on attributes modification

Question

I want to break when the class attribute is changed by a script.

I tried it with "Break on: attribute modifications"
but it doesn't break.

Answer 1

Workaround

The following code will only work if your browser supports MutationObserver. Open developer tools using F12 and execute the following code in the console:

var Spy = /** @class */ (function () {
    function Spy() {
    }
    Spy.observe = function (targetNode) {
        Spy.observer.observe(targetNode, Spy.config);
    };
    Spy.disconnect = function () {
        Spy.observer.disconnect();
    };
    Spy["break"] = function () {
        debugger;
    };
    Spy.config = { attributes: true, childList: true };
    Spy.observer = new MutationObserver(Spy["break"]);
    return Spy;
}());

After that you have to watch the node that you want to track changes for, like:

Spy.observe(document.getElementById("notify-container"));

Now the debugger will break on attribute changes made to this element.The developer tools must stay open for this to work.

When the debugger breaks, you can now under Sources tab see, which function made the change:

To stop tracking use:

Spy.disconnect();