使用 MutationObserver 监听 dom 变化未生效

Question

使用 MutationObserver 监听 dom 变化未生效

环境

• Windows 10
• Chrome 71

问题

如题，吾辈想要监听页面 DOM 树的变化

代码如下

var observer = new MutationObserver(mutationsList => {
  console.log('dom 变化了, ', mutationsList)
})
observer.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true
})

MDN

但实际上，浏览器控制台什么都没有输出！是吾辈的方法错了么？

Answer 1

发现一个很有意思的现象，就是用console.log查看不到输出内容，但使用alert会有信息框弹出，说明是生效了。

Answer 2

我也遇到了，怪异的很。
直接Copy楼主的代码：

var observer = new MutationObserver(mutationsList => {
  console.log('dom 变化了, ', mutationsList)
  debugger
})
observer.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true
})

在控制台输入，然后手动删除body下面的DOM节点，没有看到打印日志，而且debugger也没触发。我还打印了MutationObserver，来检查是否这个API被偷偷替覆盖掉，结果没有。怪异的很。

现在还没找到答案。

对了，这问题只在我本地开发的网页下存在，差不多相同代码的线上环境就没有问题，另外我打开其他任意网站都没有问题。我重新（Chrome）浏览器了几次，也没用

20分钟后更新：
MutationObserver 又突然生效了。可以打印了。非常怪异。因为这20多分钟我一直在搜索，然后我就想换个浏览器试试吧，测试了 Brave 浏览器，发现居然正常。然后我再换回 Chrome 浏览器，就正常了。

（怪怪怪，留个记录在这里）