开发者工具 - 如何检查临时添加的元素(JQuery)?

Developer tools - How to inspect the elements which are added momentarily (by JQuery)?

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

所以这个网站有一个幻灯片放映,他们正在使用JQuery。当我在检查器中查看标记和 CSS 时,我看到有两件事不断 随着幻灯片的变化而变化:

  1. 一个是opacityCSS属性可以理解,但我想 查看变化的值,但变化太快看不到阅读 任何东西。

  2. 其次- a div 添加 在另一个 div 中,因为幻灯片 暂时改变 ,但它出现的时间太短,除了它是一个 div.

所以问题是

  1. 有没有办法停止幻灯片放映这样我就可以暂时摆脱那种闪烁的效果(通过快速添加和删除以及更改元素和值)?

  2. 我在哪里可以检查 div 元素添加这么短的时间 ,然后又被删除?我在哪里可以看到 opacity 的值发生了哪些变化?

如果我把你的问题说清楚了,你想要"study"放映幻灯片以了解它是如何工作的。

您是否尝试过查看源代码并在其中搜索要检查的 jQuery 代码段? 如果该页面的源代码未被压缩,您应该能够理解那里写的内容。

Is there a way to stop the slideshow so that I can temporarily get rid of that blinking sort of effect (by speedy adding and removal and changing of elements and values)?

如果使用 CSS 过渡或动画对不透明度进行动画处理,您可以使用 Firefox and Chrome 中新添加的动画检查工具,让您暂停动画,甚至减慢动画速度。

如果不透明度通过 javascript 快速设置 increasing/decreasing element.style.opacity 值,则您可以使用调试器的功能 中断 dom 突变Chrome can do that, however it's not yet implemented in Firefox.

Where can I inspect the div element which gets added for such a short moment, and then gets removed? And where can I see what changes in the value of opacity takes place?

这里的答案相同,您应该使用调试器的中断 dom 突变功能在插入 div 时停止调试器。这将使您确切地看到 javascript 代码 inserts/removes div 或修改 opacity 的哪一行,并让您在那个时间点检查元素。