打破Chrome中的“innerHTML”更改

Question

Chrome的开发者工具提供了在修改元素的属性或DOM树时中断javascript代码执行的选项。 （检查元素＆gt;右键单击元素标记＆gt;“中断...”）
但是，当JavaScript改变元素的innerHTML时，我想跳转到代码中。激活所有“突破”选项都不会这样做，所以我想知道是否有办法实现它。

Answer 1

我建议尝试DOMSubtreeModified事件。

$("#elem").on("DOMCharacterDataModified", function(){
    alert("Modified");
});

Fiddle

Answer 2

请参见下文。

1. 文本节点是子节点。
2. 要更改文本，浏览器将删除旧的文本子节点。
3. 子树修改是一个标志。你可以听
   • 使用子树修改属性
   • 使用子树移除节点

因此，您应该检查两个。 节点删除和子树修改。

此外，您可以直接使用MutationObserver API。 旧事件（DOMSubtreeModified，DOMCharacterDataModified，...）已弃用。 mdn，google

Answer 3

根据Alexander的建议，您可以使用DOMSubtreeModified：

$0.addEventListener('DOMSubtreeModified', function(){debugger;});

（其中$ 0是被检查的元素。）
但是，由于DOMSubtreeModified已弃用，我还想在那里提出替代方案。不幸的是，只有当内部HTML被实际的innerHTML属性更改时才有效：

Object.defineProperty($0, 'innerHTML', {set:function(){debugger;}})

Answer 4

我发现了一个方法，首先可以编辑dom html并附加html标签， 说出<b>foo</b>，然后在dom上设置子树中断。当dom更改时，将触发中断。