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

Question

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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