你可能不知道的 chrome 控制台：DOM 断点（属性、节点、内容变化监听）
你是否会遇到，当前页面内容变化了，但是却不知道哪个脚本影响了它？神奇的 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”。
场景：节点被移除了，定位源码。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论