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

Usually Chrome's Break on functionality should work as expected, if not you can use the below:

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 (mutationsList, observer) {
        debugger;
    };
    Spy.config = { attributes: true, childList: true }; // Change the config to your needs
    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();