如何使用MutationObserver获取导致DOM突变的函数?

时间:2018-12-06 17:10:59

标签: javascript mutation-observers

我目前正在尝试找出哪个函数使用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)?

2 个答案:

答案 0 :(得分:3)

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

开发人员工具
->检查器
->右键单击要监视的元素
->突破:子树修改

更改选定节点的子元素后,浏览器将在负责的JavaScript上中断。

Adding DOM breakpoint

答案 1 :(得分:2)

你不能。

MutationObserver返回仅描述更改本身的MutationRecord

它不提供有关这些更改如何实现的信息。