How do you step through jQuery code efficiently?

Question

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?

Take a simple function like this:

function findFirstShortChild(parent) {     var result = null;     $("#" + parent + " li").each(function() {         if ($(this).css("height") <= 10) {             result = this;             return(false);    // break out of each() function         }     });     return(result); } 

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 .each() 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:

• You can't step through line by line or you'll end up in a whole bunch of jQuery functions.
• 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.
• 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.
• 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.
• 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?

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.

Is this what you have to do?

• Assign intermediate values to local variables in a trouble spot so you can more easily inspect them without stepping through jQuery functions.
• Move from breakpoint to breakpoint rather than stepping through things a line at a time.
• Learn how to step into and through jQuery calls (efficiently) to answer some kinds of questions.

How do you all do it? What am I missing?

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.

Answer 1

Tools

I'm using Firebug to debug jQuery code with some extensions for jQuery debugging:

• FireQuery

FireQuery is a Firefox extension integrated with Firebug

• jQuery expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page
• jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)

• FireFinder

Firefinder is an add-on to Firebug, to help find HTML elements matching chosen CSS selector(s) or XPath expression. You can also auto-select elements when hovering or via the context menu.

Example

• You can't step through line by line or you'll end up in a whole bunch of jQuery functions.
• 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.

When I want to get inside a each loop and debug step-by-step, I create a breakpoint in the function which was passed to the each function and then I debug line-by-line until I reach jQuery code. Now I'm creating a new breakpoint at the position where the jQuery code ends and I want to continue to debug.

• 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.

Look at http://msdn.microsoft.com/en-us/scriptjunkie/ee819093. There is explained how you can watch inside this for example (section 'Scenario 2'). This article gives many tips how to debug code which uses jQuery.

• 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.

I don't understand this issue. You can break out of the each loop with returning false. The function which was passed to the each function won't be called anymore when the function returned false one time.

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

Maybe you'd have more information after looking into this as explained above. But sometimes it is necessary to look into jQuery code, but I don't do that very often. Of course there can be a bug in jQuery, too. :-D

Conclusion

Yes, debugging jQuery is a bit different. But I think after a small familiarization phase you will have modified your debugging style for jQuery. And moving from breakpoint to breakpoint is nothing compared to the time which was saved when using jQuery.

.

Answer 2

Call me old-skool, but I tend to rely heavily on console.log('your choice of variable'); and it has served me well most of the time.