Question

在Chrome开发者工具中运行此代码段时：

function callback(mutations, mutationObserver) {
    for (let mutation of mutations) {
        console.log(mutation);
    }
}

let mutationObserver = new MutationObserver(callback);

mutationObserver.observe(document,
                         {childList: true,
                          subtree: true});

该代码将无法在https://twitter.com/twitter上运行，但会在您.appendChild()或更改节点的.innerHTML时在https://www.google.com/上运行。

是什么导致https://twitter.com/twitter上的问题？新的推文通过.appendChild()呈现，但它们也不会显示在控制台日志中。

Answer 1

未在控制台日志中显示突变的原因是因为Twitter正在使用自己的实现覆盖console.log。

如果您转到https://www.google.com/ / https://twitter.com/twitter并在控制台中搜索console.log;，则可以自己验证。

在Google上，您将获得：ƒ log() { [native code] }。
而在Twitter上，您将获得：ƒ (){}。

尽管如此，仍然可以检测到突变。您可以使用以下代码段对此进行验证：

let mutationsCopy;

function callback(mutations, mutationObserver) {
    mutationsCopy = [...mutations];
}

let mutationObserver = new MutationObserver(callback);

mutationObserver.observe(document,
                         {childList: true,
                          subtree: true});

现在，如果我们在控制台中运行：
document.body.appendChild(document.createElement("div"));

并搜索mutationsCopy;，我们将得到：
[MutationRecord]

MutationObserver无法检测到使用.appendChild（）创建的新节点

1 个答案: