Search code examples
jquerygoogle-chromesliderdeveloper-toolsfirefox-developer-tools

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

I am looking at how a website is designed using the Inspector in Chrome. I can also use Firefox Developer tools or Firefox Web Developer add-on or Chrome Web Developer extension.

So this website has a slide-show and they are using JQuery for it. As I am looking at the markup and CSS in the inspector, I see two things constantly changing as the slides change:

  1. One is opacity CSS property which is understandable, but I'd like to see the changing values, but it changes too fast to see read anything.

  2. Second- a div is added in another div as the slides change momentarily, but the moment when it appears is too short to notice anything except that it is a div.

So the question is that

  1. 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)?

  2. 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?

Solution

  • 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)?

    If the opacity is animated with a CSS transition or animation, you can use the newly added animation inspection tools in Firefox and Chrome which let you pause animations, or even slow them down.

    If however the opacity is animated via javascript, by rapidly increasing/decreasing the element.style.opacity value, then you can use the debugger's ability to break on dom mutations. 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?

    Same answer here, you should use the debugger's break on dom mutation feature to halt the debugger when that div gets inserted. This will let you see exactly which line of javascript code inserts/removes the div or modifies the opacity, and will let you inspect the elements at that point in time.