什么是确定哪些javascript代码更改页面中特定html内容的最佳方法

Question

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

Answer 1

最直接（低噪音）的方式使用同步暂停，让你在整个调用堆栈中徘徊：

1. 打开chrome的devtools。
2. 右键单击devtools“Elements”选项卡中的元素以显示上下文菜单
3. 选择Break On ...＆gt;子树修改。

一旦元素的“innerHTML”发生变化，脚本执行将暂停，您可以在“Sources”选项卡中查看整个调用堆栈，包括请求DOM更改的任何函数。

某些DOM修改（如动画库）可以使用setTimeout或回调来丢弃导致更改的大部分调用堆栈，在这种情况下，Profile可能会更有趣，因为动画函数应该在“沉重”的视野中，它像拇指一样突出。