Can I "step over" just jQuery code while debugging?

Question

While stepping through a script that uses jQuery, I just want to test the code I wrote. I don't want to step into the jQuery file -- I'm not debugging jQuery, just my own file.

Are there any ways to tell a debugger to not step into the jQuery file? I use Visual Studio + Internet Explorer, as well as Firefox + Firebug for stepping through code ... and both seem to love to step through dozens of jQuery statements.

For example, say I have a script like this:

$("div").each(function() {    $(this).hide(); }); 

This is technically a single statement -- therefore "Step Over" will execute all code at once, which will skip over the inner "hide" statement. However, "Step Into" will take me to the jQuery code, and I will have to step dozens of lines of code before it takes me to the "hide" statement.

I would like to have the debugger completely ignore the jQuery code, so I can easily step through just my own code and never step through the jQuery code.

In C#, this is possible by using the [DebuggerStepThrough()] attribute on a class. But that doesn't help with JavaScript.

Answer 1

Yes you can

At least in FireFox (25+) and Chrome (30+).

In FireFox this feature is called "Black boxing" and will be available with FireFox 25. It let's do exactly what you where looking for:

Nick Fitzgerald and Chris Heilmann: "New Features of Firefox Developer Tools: Episode 25"

This feature was also introduced to Chrome (v30+) although it's tougher to find/configure. It's called "skip through sources with particular names" and Collin Miller did an excellent job in describing how to configure it:

Collin Miller: "Tips and Tricks: Ignoring library code while debugging in Chrome"

I'm using it in Chrome right now. It works like a charm and saves me so much time.