javascript - 有没有一种简单的方法可以找出通过哪个js代码操作DOM元素？

Question

我在浏览一个网站时看到了一些有趣的东西:一个以有趣的方式动画的 DOM 元素。我想弄清楚它是如何完成的，所以我开始深入研究源代码。我花了很长时间才找到执行此操作的代码。

有谁知道一种“跟踪”DOM 元素的方法，这样您就可以检测到它是通过什么代码被操纵的？

Answer 1

在 Chrome 中，您可以添加 DOM 断点。您可以找到更深入的解释 here .

简而言之，您在“元素”面板中选择要检查的 DOM 元素，然后选择 Break On... -> Subtree Modifications。当 DOM 元素改变其结构时，您将被指向执行该操作的 JS 代码。

但是，如果您特别关注执行动画的 JS 代码，那可能只会更改元素的 CSS，据我所知，没有办法打破它。

另一方面，Chrome 也非常灵活地让您 break on JavaScript events发生在浏览器中。作为jfrej suggested ，您可以看到什么 Action 触发了动画并在其上中断。

您可以从同一元素菜单 (Break On...) 将断点设置为 Attributes modification，它也会在 CSS 更改时中断。感谢Bergi对于评论中的建议。尝试了 simple example here .