What's the best way to figure out which javascript code that change specific html content in page

Question

我在我的网页上有<p>标签，我试图找出在此元素中添加文本的JavaScript函数，是否有任何特定的方法在chrome中添加此标记上的侦听器以找出在此标记上写入的脚本？

Answer 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.