Avoid stepping through javascript file in Chrome Developer Tools?

Question

I am wondering, is there any way to omit a javascript file from Chrome Developer Tools debugger, so it will automatically skip over any function calls made to that script?

I ask because my projects often include large libraries such as jQuery. When I step through javascript in Chrome Developer Tools while debugging, I have to step through jQuery's lib every time I make a jQuery call in my script.

I end up having to set breakpoints one line after every call to the jQuery object. It's the only way I have found to skip past and it's very annoying.

Answer 1

UPDATE 2
There has been an improvement in user flow of this feature in latest versions of chrome. Please refer to https://developer.chrome.com/devtools/docs/blackboxing

UPDATE 1
Since Chrome version 38, you no longer have to enable Developer Tools experiments.

Below details are only for history

This is possible now in chrome version 30+.

1. Enable "Enable Developer Tools experiments" from chrome://flags/#enable-devtools-experiments. (Yes, you need to type that where you type the URL)
2. Relaunch chrome
3. Click on settings icon in Chrome Developer Tools
4. Go to Experiments section. Notice the WARNING ;) and then tick Enable frameworks debugging support. (You also might want to try Show step-in candidates while debugging)
5. Now, close Chrome Dev Tools and again open it.
6. Click on settings icon in Chrome Developer Tools
7. In general section you will find "Skip stepping through sources with particular names". Tick that and provide regex for the javascript file names which you want to skip stepping into.

Source: Tips and Tricks: Ignoring library code while debugging in Chrome

Answer 2

iSid I would like to point out that as of Chrome 38 you no longer need to enable the devtools experiments. Instead if you go straight to the F12 developer tools -> settings -> general -> sources you will see the last item in there is manage framework blackboxing. The good part is you can setup each framework on it's own line or you can throw together a generic catch all pattern like (firebug|angular|knockout|jquery|bootstrap|modernizr|respond)

Answer 3

Things are a little bit different in the version 51.

Press F12 then F1. Pick 'Blackboxing' from the menu on the left.

Answer 4

Under Chrome v68, while debugging on a .js file, use left click to blackbox script:

https://developer.chrome.com/devtools/docs/blackboxing

Answer 5

The "Step Out" button can be used to quickly get you out of the JQuery code.