Javascript 有没有一种简单的方法来确定DOM元素是通过哪个js代码操作的？

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

---

有人知道如何对DOM元素进行“跟踪”排序，以便您可以通过操作什么代码来检测它吗？

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

简而言之，您可以在“元素”面板中选择要检查的DOM元素，然后选择“

断开…”

->“子树修改”。当DOM元素更改其结构时，您将看到执行此操作的JS代码

但是，如果您特别关注制作动画的JS代码，那么这可能只会改变元素的CSS，据我所知，这是无法打破的

另一方面，Chrome也非常灵活，可以让您在浏览器中实现这一点。如图所示，您可以看到触发动画的动作，并在该动作上中断

---

您可以从同一元素菜单（

Break On…

）将断点设置为

Attributes modification

），它也将在CSS更改时中断。感谢您在评论中提出的建议。试过一次

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

Firebug可以在多个文件中进行搜索-只需转到脚本选项卡，在搜索字段中聚焦并检查多个文件。这样，您应该能够找到以DOM元素为目标的代码段

---

或者，如果动画是由事件触发的，例如鼠标单击，您可以使用Chrome的开发工具在“源”选项卡下添加事件侦听器断点，其工作方式与所述的DOM断点相同。

+1，感谢您的建议，在我的例子中，我担心这是关于固定DOM结构的css操作，所以在这种特殊情况下，这对我没有帮助，但是在其他情况下，了解它是非常好的！如果调试器能够在

domsubtreemedited

事件上停止，则调试器应该能够在

domtrremedited

上停止，因此，您可以在“断开”上使用该选项。但我不知道这是否适用于CSS样式的更改。让我试试。：）可能重复的