Break on "innerHTML" changes in Chrome

Question

Chrome's developer tools provides the option to break the javascript code execution when an element's attributes or DOM tree are modified. (Inspect an element > right-click on the element tag > "Break on…")
However, I would like to jump into the code when the innerHTML of an element is changed by JavaScript. Activating all the "break on" options won't do it, so I'd like to know if there is some way to do it.

Answer 1

1. Text node is a child node.
2. To change a text, the browser remove the old text child node.
3. Subtree Modifications is a flag. When this flag is on, you can listen
   • Attribute modifications with subtree
   • Node removal with subtree

So, You should check two. node removal and subtree modifications.

Also, you can use MutationObserver API directly.

Old events (DOMSubtreeModified , DOMCharacterDataModified, ...) are deprecated. mdn, google

Answer 2

I would suggest trying DOMSubtreeModified Event .

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

Fiddle