title: How do you step through jQuery code efficiently?
body: <p>I've just been playing with jQuery for a little while - been using YUI for awhile and while I really appreciate a lot of what the jQuery library has to offer, I'm finding it to be quite a pain to step through jQuery code in the debugger and I'm wondering if there are any tricks other than the obvious things?</p>
  
  <p>Take a simple function like this:</p>
  
  <pre><code>function findFirstShortChild(parent) {
      var result = null;
      $("#" + parent + " li").each(function() {
          if ($(this).css("height") &lt;= 10) {
              result = this;
              return(false);    // break out of each() function
          }
      });
      return(result);
  }
  </code></pre>
  
  <p>If the function isn't working as intended and I decide I want to step through it, it is not intuitive at all.  In fact, you can't really step through it at all.  You would have to go through all sorts of jQuery code in a bunch of places.  You can't step into the <code>.each()</code> loop because it isn't actually a traditional loop.  I'm surprised at how unproductive I feel in the debugger compared to other libraries.  So, here are my issues:</p>
  
  <ul>
  <li>You can't step through line by line or you'll end up in a whole bunch of jQuery functions.</li>
  <li>You can't get into the inside of the each loop without either going through a lot of jQuery stuff or setting a breakpoint and letting it hit the breakpoint.</li>
  <li>You can't see what any of the intermediate values like $(this) are or why it might be getting a bogus value for the height without stepping through miles of foreign jQuery code.</li>
  <li>You can't break out of the each loop like you do in a traditional loop (with break or return) because it isn't an actual loop.  The loop is inside the .each() function.  What looks like a loop here is just the internals of a function call.</li>
  <li>What if I want to know why I'm getting a bogus height value in the loop.  Is there any way to figure that out without stepping through a lot of jQuery code?</li>
  </ul>
  
  <p>So, what am I missing here?  Is it just a lot less convenient to step through this kind of code?  Am I missing some magic techniques built into the jQuery framework to help with this?  Or is the price you pay for using this style library that you have to completely change how you debug problems.  </p>
  
  <p>Is this what you have to do?</p>
  
  <ul>
  <li>Assign intermediate values to local variables in a trouble spot so you can more easily inspect them without stepping through jQuery functions.</li>
  <li>Move from breakpoint to breakpoint rather than stepping through things a line at a time.</li>
  <li>Learn how to step into and through jQuery calls (efficiently) to answer some kinds of questions.</li>
  </ul>
  
  <p>How do you all do it?  What am I missing?</p>
  
  <p>I should mention that I use Firebug in FF5 and the built-in debugger in Chrome (Chrome more often than Firebug now).  And, yes I'm using the debug (non-minified) version of jQuery when debugging.  So, this isn't a question about which debugger you use, but how you use the debugger to effectively step through jQuery code.</p>