有没有一种简单的方法来找出哪一个js代码的DOM元素被操纵？

我在看一个网站，看到一些有趣的东西：一个有趣的方式动画的DOM元素。我想弄清楚它是如何完成的，因此我开始深入研究源代码。我花了很多时间来追踪这段代码。有没有一种简单的方法来找出哪一个js代码的DOM元素被操纵？

有谁知道一种方法来'追踪'一个DOM元素，以便您可以检测到它正在被操纵的代码？

2012-10-23 Asciiom

[Find what javascript changes the DOM？]（http://stackoverflow.com/questions/11268457/find-what-javascript-changes-the-dom） – Bergi

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

总之，您在元素面板中选择要检查的DOM元素，并选择Break On... - >Subtree Modifications。当DOM元素更改其结构时，您将被指向执行该操作的JS代码。但是，如果您是专门用于制作动画的JS代码之后，那只会改变元素的CSS，并且据我所知，没有办法打破这一点。

另一方面，Chrome也很灵活，让你在浏览器中发生break on JavaScript events。由于jfrej suggested，你可以看到什么动作触发动画并打破。

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

2012-10-23 09:08:57

+1，谢谢你的建议，在我的情况恐怕是关于CSS固定DOM结构的操作，所以在这种情况下它不会帮助我，但是对于其他情况很了解！ – Asciiom

如果调试器能够停止在DOMSubtreeModified事件上，它应该能够停止在DOMAttrModified上 – Bergi

这就是说，你有这个选项。但我不知道这是否适用于CSS样式更改。让我尝试。 :) –

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

Firebug可以在多个文件中进行搜索 - 只需转到脚本选项卡，重点搜索字段并检查多个文件。这样你应该能够找到一些针对DOM元素的代码。

或者，如果动画是由事件触发，如鼠标点击，您可以使用Chrome的开发者工具来添加事件监听器断点下来源选项卡，将在相同的方式，DOM断点描述工作通过Alex。

2012-10-23 09:21:29 jfrej

回答