Javascript Chrome-Break属性修改

我想在脚本更改class属性时中断

我尝试了“打开：属性修改，但它没有断开。”

---

通常，Chrome的

中断功能应按预期工作，如果没有，您可以使用以下功能：

解决方法

以下代码仅在浏览器支持的情况下才起作用。
使用
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 (mutationsList, observer) {
        debugger;
    };
    Spy.config = { attributes: true, childList: true }; // Change the config to your needs
    Spy.observer = new MutationObserver(Spy["break"]);
    return Spy;
}());

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

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

现在，调试器将在对该元素进行属性更改时中断。开发人员工具必须保持打开状态才能使其工作

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


要停止跟踪，请使用：

Spy.disconnect();

元素可能会被完全重新创建。是的，我也这么想，但不应该
节点删除
然后应用..？现在，在页面刷新后，它可以工作了，我还勾选了几个不同的全局事件侦听器断点。@图例您设置了哪些全局事件侦听器断点？似乎设置属性修改对于您的用例来说已经足够了。只需再次检查，我勾选了所有事件侦听器，因此页面刷新解决了它，是的，这里只需要修改属性。工作非常完美！谢谢如果这是一个脚本修改目标的加载，该怎么办？@Matoeil您可以在浏览器解析页面之前使用Fiddler修改页面，例如：