我在浏览一个网站时看到了一些有趣的东西：一个以有趣的方式动画的 DOM 元素。我想弄清楚它是如何完成的，所以我开始深入研究源代码。我花了很长时间才找到执行此操作的代码。
有谁知道一种“跟踪” DOM 元素的方法，以便您可以检测到它被操纵的代码？
问问题
1762 次
2 回答
8
在 Chrome 中，您可以添加 DOM 断点。你可以在这里找到更深入的解释。
简而言之，您在 Elements 面板中选择要检查的 DOM 元素，然后选择Break On...-> Subtree Modifications。当 DOM 元素更改其结构时，您将被指向执行该操作的 JS 代码。
但是，如果您特别关注执行动画的 JS 代码，那只能更改元素的 CSS，据我所知，没有办法打破这一点。
另一方面，Chrome 在让您中断浏览器中发生的 JavaScript 事件方面也非常灵活。正如jfrej 建议的那样，您可以查看触发动画的动作并在此基础上中断。
您可以Attributes modification从同一元素菜单 ( Break On...) 设置断点，它也会在 CSS 更改时中断。感谢Bergi在评论中提出的建议。在这里尝试了一个简单的例子。
于 2012-10-23T09:08:57.790 回答
3
在大多数情况下，JavaScript 需要使用某种选择器来修改 HTML 结构或应用 CSS。想想选择器可能是什么——它通常是 ID 或 Class。
Firebug 可以在多个文件中进行搜索 - 只需转到 Script 选项卡，将焦点放在搜索字段中并选中Multiple Files。这样，您应该能够找到以 DOM 元素为目标的代码。
或者，如果动画是由事件触发的，例如鼠标点击，您可以使用 Chrome 的开发者工具在Sources选项卡下添加 Event Listener Breakpoints，其工作方式与Alex描述的 DOM Breakpoints 相同。
于 2012-10-23T09:21:29.133 回答