javascript - Break on "innerHTML" changes in Chrome - Stack Overflow

admin管理员组

文章数量:1356092

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

Share Improve this question Follow asked Jun 16, 2014 at 12:37 Protector oneProtector one 7,35955 gold badges6767 silver badges8888 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

本文标签： javascriptBreak on quotinnerHTMLquot changes in ChromeStack Overflow