Can I “step over” just jQuery code while debugging

问题:

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.

回答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.

回答2:

Pretty sure the answer is "no, this feature does not exist".

What's your motivation here, though? It looks to me like setting a breakpoint on Line 2 and creating a watch for the "resultset" of Line 1 whilst you're there will get you what you're likely to want.

回答3:

F10 should step over the function calls, F11 should step into the function calls. This works in VS as well as firebug.

回答4:

At least Firebug's JavaScript debugger has an option to "step over" which still does not descend into function calls.

However, you will have to choose between "step (into)" and "step over" manually depending on what kind of function is being called.

回答5:

The answer is rather simple, you just have to refactor the function out. I can't recall

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

function doThis(object) {
   $(this).hide();
}

Will almost certainly work with a halfway decent debugger.