如何获得触发的 MutationObserver 的堆栈跟踪？

Posted 2023-02-19

【中文标题】如何获得触发的 MutationObserver 的堆栈跟踪？

【英文标题】：How do you get a stack trace for a triggered MutationObserver?

【发布时间】：2013-02-24 08:06:19

【问题描述】：

首先，这不是“如何创建变异观察者？”发帖，我已经看到了 API。

我想知道是否有人知道显示突变发生时间的“来源”的方法。这很可能是某种解决方法 - 我在 API 文档中看不到任何提及。

我试图找出一个元素将其display in style 设置为none 的位置。

我的代码如下所示：

var observer = new MutationObserver(function(mutations) 
    mutations.forEach(function (mutation) 
        if (mutation.attributeName === "style") 
            var extendedMutation = _.extend(, mutation, 
                newValue: $(mutation.target).attr("style")
            );

            console.log(extendedMutation);
        
      );
);

observer.observe(row.element[0],  attributes: true, attributeOldValue: true );

我有几个突变事件，它们看起来是这样的：

    addedNodes: NodeList[]

    attributeName: "style"

    attributeNamespace: null

    newValue: "display: none;"

    nextSibling: null

    oldValue: ""

    previousSibling: null

    removedNodes: NodeList[]

    target: li#d526d311-e6e0-4ef1-a3a1-f8686bbb468f.group

    type: "attributes"

我只是想知道它来自 JS 源代码的哪个位置！有什么想法吗？

请注意，我尝试了 ctrl+f，但无济于事。

调试器/异常输出（也尝试过用于 Chrome 的 WebkitMutationObserver，结果相同）：

【参考方案1】：

我知道这个线程已经很老了，但是现在有一个来自 Chrome 的工具来跟踪异步调用，我想提一下。

Chrome 调用堆栈异步选项，我认为它可以实现异步调用的回溯。此选项可在开发者工具 -> 调用堆栈选项卡中找到。通过打开 Async 选项并在 MutationObserver 回调函数上设置断点，我们将能够看到完整的调用堆栈。

希望对你有帮助。

【讨论】：

IMO，这比上面的答案更好。

哎呀！ Chrome DevTools 现在似乎缺少这个“异步”复选框（v 60.0 ...）。也许它已经去别的地方了？ FF有这样的吗？我讨厌 Chrome。