Chrome - 打破属性修改

Question

我希望在脚本更改class属性时中断。

我尝试了“Break on：属性修改” 但它并没有破裂。

Answer 1

解决方法

以下代码仅在您的浏览器支持MutationObserver时才有效。使用F12打开开发人员工具并在控制台中执行以下代码：

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

之后，您必须观察要跟踪更改的节点，例如：

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

现在，调试器将破坏对此元素所做的属性更改。开发人员工具必须保持打开才能使其正常工作。

当调试器中断时，您现在可以在Sources选项卡下看到，哪个函数进行了更改：

要停止跟踪使用：

Spy.disconnect();