title: Developer tools - How to inspect the elements which are added momentarily (by JQuery)?
body: <p>I am looking at how a website is designed using the <strong>Inspector</strong> in Chrome. I can also use Firefox Developer tools or Firefox Web Developer add-on or Chrome Web Developer extension.</p>
  
  <p>So this website has a <strong>slide-show</strong> and they are <strong>using JQuery</strong> for it. As I am looking at the markup and CSS in the inspector, <strong>I see two things constantly</strong> changing as the slides change:</p>
  
  <ol>
  <li><p>One is <strong><code>opacity</code></strong> CSS property which is understandable, but I'd like
  to see the changing values, but it changes too fast to see read
  anything.</p></li>
  <li><p>Second- <strong>a <code>div</code> is added</strong> in another <code>div</code> as the slides change <strong>momentarily</strong>, but the moment when it appears is too short to notice anything except that it is a <code>div</code>.</p></li>
  </ol>
  
  <p>So the question is that </p>
  
  <ol>
  <li><p><strong>Is there a way to stop the slideshow</strong> so that I can temporarily get rid of that blinking sort of effect (by speedy adding and removal and changing of elements and values)?</p></li>
  <li><p><strong>Where can I inspect the <code>div</code> element which gets added for such a short moment</strong>, and then gets removed? And where can I see what changes in the value of <code>opacity</code> takes place? </p></li>
  </ol>