通过 chrome devtools 添加/删除节点时观察 DOM 突变答案

【问题标题】：Observe DOM mutation when Nodes are added/removed via chrome devtools通过 chrome devtools 添加/删除节点时观察 DOM 突变
【发布时间】：2015-02-24 20:29:29
【问题描述】：

我正在编写一个 Chrome 插件，它需要记录对 DOM 的所有更改。也是由 chrome devtools 制作的。我可以在内容脚本中使用 MatationObeserver 来获取属性更改，但无法通过 devtools 完成插入/删除节点。有人有想法吗？

【问题讨论】：

您的意思是您可以看到通过页面中的脚本完成的突变，但当这些突变来自开发工具时却看不到？

标签： javascript dom google-chrome-extension google-chrome-devtools mutation-observers

【解决方案1】：

我想我错过了“childList：true”，如下所示：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    for(var mutation in mutations){
        modificationList.push(mutation);
    }
});

observer.observe(document, {
    subtree: true,
    attributes: true,
    characterData: true,
    childList:true
});

但我仍然不知道为什么。我认为子树应该足够了。

【讨论】：

@MarcoBonelli 这是回答问题的 OP，而不是添加更多信息。
Marcel，我添加了一个答案来解释你为什么 subtree 工作。

【解决方案2】：

正如您在自己的答案中指出的那样，您缺少subtree: true。我想详细说明为什么会这样。

MutationObserver 专注于观察单个节点的变化，这些变化有 3 种形式：

'attributes' 适用于 'target' 是 Element 并为属性更改发出突变记录，例如target.setAttribute。
'characterData' 适用于 'target' 是 Text 或 CDataSection 节点并为数据更改发出突变记录，例如node.textContent = '' 或 node.data = ''。
'childList' 适用于 'target' 是 Document 或 Element 并在其子项移动时发出突变记录，例如node.appendChild 之类的。

看来你的问题是对childList的误解。它不在子节点发生变异时创建记录，它会在顶部节点获得或失去子节点时创建记录。

然后我们到达subtree，基本上就是recursively watch。这意味着对 target 的子项的任何更改也将由该观察者记录，而不是纯粹对目标的更改。

【讨论】：