I have <p> 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 on this tag to find out which script that writing on this tag?
- The one way I know how to do this is using the timeline i developer tools (f12). So set it to record, click or do some action to change a function and then look through and see if you can find the functionAdjit– Adjit2016-03-16 19:42:53 +00:00Commented Mar 16, 2016 at 19:42
- 4You can use "Developers Tool > Profile > Collect JavaScript CPU Profile" and check which function is executingJagdish Idhate– Jagdish Idhate2016-03-16 19:44:56 +00:00Commented Mar 16, 2016 at 19:44
- @JagsSparrow I like your solution but it doesn't specify which element was changed by the listed actions.nkarmi– nkarmi2016-03-16 19:47:34 +00:00Commented Mar 16, 2016 at 19:47
- It will not, but it will reduce lookup area of codeJagdish Idhate– Jagdish Idhate2016-03-16 19:49:11 +00:00Commented Mar 16, 2016 at 19:49
- @JagsSparrow Yes you are right i voted up your answer, but i think there's better way to find the sneaky beaky script :)nkarmi– nkarmi2016-03-16 19:56:13 +00:00Commented Mar 16, 2016 at 19:56
Add a comment |
1 Answer
The most direct (low noise) way uses a sync pause that lets you poke around in the whole call stack:
- Open chrome's devtools.
- Right-click the element in the devtools "Elements" tab to reveal the context menu
- 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.
