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