CODEWITHSUNDEEP
javascriptgoogle-chrome-devtools
Protector one
Protector one

Reputation: 7271

Break on "innerHTML" changes in Chrome

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.

Upvotes: 5

Views: 3073

Answers (4)

Jehong Ahn
Jehong Ahn

Reputation: 2406

  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

Upvotes: 3

james h
james h

Reputation: 125

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.

Upvotes: 2

Alexander
Alexander

Reputation: 12795

I would suggest trying DOMSubtreeModified Event . 

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

Fiddle

Upvotes: 2

Protector one
Protector one

Reputation: 7271

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;}})

Upvotes: 0

Related Questions