开发人员工具 - 如何检查暂时添加的元素（通过JQuery）？

Question

我正在研究如何使用Chrome中的检查器设计网站。我还可以使用Firefox Developer工具或Firefox Web Developer插件或Chrome Web Developer扩展。

所以这个网站有一个幻灯片，他们使用JQuery 。当我在检查器中查看标记和CSS时，随着幻灯片的更改，我发现两件事情不断变化：

1. 一个是 opacity CSS属性，这是可以理解的，但我想要 看到变化的值，但它变化太快，看不到 任何东西。

2. 第二次 div已添加<{1}}另一个div，因为幻灯片暂时改变 ，但它出现的时刻是太短了，除了它是div

之外什么也没注意到

所以问题是

1. 有没有办法停止幻灯片，以便我可以暂时摆脱那种闪烁的效果（通过快速添加和删除以及更改元素和值）？

2. 我可以在哪里查看div元素，这些元素会在短时间内添加，然后被删除？我在哪里可以看到opacity的价值发生了什么变化？

Answer 1

如果我直截了当地提出你的问题，你想“学习”幻灯片，以了解它是如何运作的。

您是否尝试查看源代码并搜索它以查找要检查的jQuery代码？ 如果该页面的源代码尚未压缩，您应该能够理解那里所写的内容。

Answer 2

  

有没有办法停止幻灯片放映，以便我可以暂时摆脱那种闪烁的效果（通过快速添加和删除以及更改元素和值）？

如果使用CSS过渡或动画动画不透明度，您可以使用Firefox和Chrome中新添加的动画检查工具，这样可以暂停动画，甚至可以减慢它们的速度。

但是，如果不透明度通过javascript动画，通过快速增加/减少element.style.opacity值，那么您可以使用调试器打破dom突变的能力。 Chrome可以做到这一点，不过它是not yet implemented in Firefox。

  

在哪里可以检查在短时间内添加的div元素，然后被删除？我在哪里可以看到不透明度的变化发生了什么？

这里的答案相同，你应该使用调试器的dom变异中断来在插入div时暂停调试器。这样您就可以确切地查看哪行javascript代码插入/删除了div或修改了opacity，并且可以让您在该时间点检查元素。