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

Question

我正在研究如何使用Chrome中的Inspector设计网站。我也可以使用Firefox开发人员工具或Firefox Web Developer附加组件或Chrome Web Developer扩展。

所以这个网站有一个幻灯片他们是使用jQuery它。正如我期待在督察的标记和CSS，我看到两件事情不断改变，因为改变幻灯片：

1. 一是opacity CSS属性是可以理解的，但我想 看到变化的值，但它变化太快，看到什么读 。

2. 二线一个div在另一个div添加作为幻灯片改变暂时，但是当它出现的那一刻太短注意到，除了它是一个div什么。

所以现在的问题是，

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

2. 我在哪里可以检查它获取这样一个短暂的瞬间添加div元素，然后获取删除？我在哪里可以看到opacity的价值发生了什么变化？

Answer 1

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

如果不透明度与CSS过渡或动画动画，可以在Firefox和Chrome这让你暂停动画，甚至慢下来使用新增的动画检查工具。

如果不透明度通过JavaScript进行动画，通过快速增加/减少值，那么您可以使用调试器的能力来在dom变异上中断。 Chrome可以做到这一点，但它是not yet implemented in Firefox。

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

相同的答案，你应该使用调试器的DOM突变特性休息时div被插入到停止调试器。这将让你看到究竟哪一行javascript代码插入/删除了div或修改了opacity，并且可以让你在该时间点检查元素。

Answer 2

如果我直接得到你的问题，你想“学习”一个幻灯片，以了解它是如何工作的。

您是否尝试过查看源代码并搜索您想要检查的jQuery代码片段？ 如果该页面的源代码没有被压缩，你应该能够理解那里写的是什么。