你是否会遇到，当前页面内容变化了，但是却不知道哪个脚本影响了它？神奇的 chrome 控制台可以帮到你。

Subtree Modifications

子节点（内容、属性）修改通知

如上图，添加了body节点的子节点修改通知。

// 不会触发 Subtree Modifications
document.body.innerHTML = 'test';
document.body.innerHTML = 'test2';

// 会触发 Subtree Modifications
document.body.innerHTML = '<b></b>';

如上图，依次修改了body节点的内容，只有当内容中包含节点，才会触发通知。

使用场景：常用在子节点内容发生变化后，来定位源码。

Attributes Modifications

（当前节点）属性修改通知

只有当修改了 DOM 属性的操作才会触发通知回调。

// 会触发 Attributes Modifications
document.body.id = 123;
document.body.setAttribute('id', 123);
document.body.setAttribute('id2', 456);

// 不会触发 Attributes Modifications
document.body.id2 = 456;

使用场景：节点的 className 等属性被修改后，来定位源码。

Node Removal

（当前）节点移动（通知）

原始节点：

<body>
    <p>子节点1</p>
    <p>子节点2</p>
</body>

第1次：

// 第1次：不会触发
document.body.insertBefore(document.body.children[1], document.body.children[0]);

此时节点为：

<body>
    <p>子节点2</p>
    <p>子节点1</p>
</body>

虽然，监听的是“子节点1”，并且它的位置也发生了变化，但这个变化是由“子节点2”导致的，所以不会触发通知回调。

第2次：

// 第2次：会触发
document.body.insertBefore(document.body.children[1], document.body.children[0]);

此时节点为：

<body>
    <p>子节点1</p>
    <p>子节点2</p>
</body>

此时，会触发节点移动通知回调，实际操作的就是“子节点1”。

场景：节点被移除了，定位源码。

FED

你可能不知道的 chrome 控制台：DOM 断点（属性、节点、内容变化监听）

Subtree Modifications

Attributes Modifications

Node Removal