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.

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.

• javascript
• google-chrome-devtools

4 Answers 4

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

I would suggest trying DOMSubtreeModified Event .

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

Fiddle

I found a trick to do that, first you can edit the dom html and append a html tag, say <b>foo</b>, then set a Subtree break on the dom. When the dom changes it will trigger the break.

As per Alexander's suggestion, you can use DOMSubtreeModified:

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

(Where $0 is an inspected element.)
However, as DOMSubtreeModified is deprecated, I also want to throw an alternative out there. Unfortunately this only works when the inner HTML is changed by the actual innerHTML property:

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