javascript - 如何使用 MutationObserver 获取导致 DOM 突变的函数？

Question

我目前正在尝试使用 MutationObserver 找出哪个函数修改了 DOM。不幸的是，以下代码段不起作用(堆栈跟踪似乎是空的)。

var targetNode = document.body;
var config = { attributes: true, childList: true, subtree: true };
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
      // The trace unfortunatelly doesn't contain the function 
      // "addSomeElement", which I am trying to receive at this point.
      console.trace(); 
    }
};

var observer = new MutationObserver(callback);
observer.observe(targetNode, config);

随后是一些 DOM 突变:

function addSomeElement() {
  targetNode.appendChild(document.createElement('span'));
}
addSomeElement();

有什么方法可以输出执行实际突变调用的函数(在本例中为 appendChild)？

Answer 1

使用 DOM 断点(应该在 Chrome 和 Firefox 中工作)

开发者工具
-> 检查员
-> 右键单击​​要监视的元素
-> Break on: 子树修改

当所选节点的子元素发生更改时，浏览器将在负责的 JavaScript 片段上中断。