What's The Best Way To Figure Out Which Javascript Code That Change Specific Html Content In Page

I have

tag in my webpage and i am trying to find out which JavaScript function that adding text inside this element, is there any specific way in chrome to add listener o

Solution 1:

The most direct (low noise) way uses a sync pause that lets you poke around in the whole call stack:

1. Open chrome's devtools.
2. Right-click the element in the devtools "Elements" tab to reveal the context menu
3. Choose Break On... > Subtree Modifications.

Once the element's "innerHTML" changes, the script execution will pauses and you can view the whole call stack in the "Sources" tab, including whatever function requested the DOM change.

Certain DOM modifications like animation libraries can use a setTimeout or callback that discards much of the call stack that lead up to the change, and in those cases, a Profile might be more interesting, since the animation function should stand out like a sore thumb in a "Heavy" view.