我在浏览一个网站时看到了一些有趣的东西:一个以有趣的方式动画的 DOM 元素。我想弄清楚它是如何完成的,所以我开始深入研究源代码。我花了很长时间才找到执行此操作的代码。
有谁知道一种“跟踪”DOM 元素的方法,这样您就可以检测到它是通过什么代码被操纵的?
最佳答案
在 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 .
关于javascript - 有没有一种简单的方法可以找出通过哪个js代码操作DOM元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13026942/