有没有一种简单的方法可以找出操作DOM元素的js代码?

时间:2012-10-23 09:05:42

标签: javascript debugging dom

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

有没有人知道一种“跟踪”DOM元素的方法,以便您可以检测它被操作的代码?

2 个答案:

答案 0 :(得分:8)

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

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

但是,如果您专门用于执行动画的JS代码之后,那可能只会更改元素的CSS,据我所知,没有办法打破它。

另一方面,Chrome也非常灵活,让您break on JavaScript events在浏览器中发生。作为jfrej suggested,您可以看到哪个动作会触发动画并打破动画。

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

答案 1 :(得分:3)

在大多数情况下,JavaScript需要使用某种选择器来修改HTML结构或应用CSS。想想选择器可能是什么 - 它通常是ID或Class。

Firebug可以在多个文件中进行搜索 - 只需转到“脚本”选项卡,将焦点放在搜索字段中,然后选中多个文件。这样您就可以找到定位DOM元素的代码段。

或者,如果动画是由事件触发的,例如鼠标点击,则可以使用Chrome的开发者工具在 Sources 标签下添加事件监听器断点,这将以相同的方式工作作为Alex描述的DOM断点。