chrome devtool调试器 如何在元素类名变化时打断?

How to break on class name change in chrome devtool?
chrome devtool调试器 如何在元素类名变化时打断?
当我们想在元素属性变化打断时, 通常可以这样做:
右键元素选择Break on: attribute modifications, 这样元素属性变化时就会打断了,
但很郁闷的是这种方法无法监听class属性的变化, 因此要使用其他办法
方法:
在chrome调试器里 sources --> snippets --> new snippet, 然后粘贴 下面的代码里的代码并保存, 右键点run运行

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;
}());

如果你想监听某个元素, 需要在console里这样调用:

Spy.observe(document.getElementById("foo"));

这样当此元素类名改变时就会被打断了,
如果想取消监听, 执行这段代码:

Spy.disconnect();