45

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.

BumbleB2na
  • 10,723
  • 6
  • 28
  • 30
  • 1
    Do "step over" and "step out" buttons not work for some reason? – Dmitry B. Oct 19 '11 at 20:47
  • 3
    They do work, but then at times it will jump back in to the jQuery script. I think I want it to work too much like Visual Studio debugger. – BumbleB2na Oct 19 '11 at 20:55
  • 1
    @DmitryBeransky That is different - instead of stepping with F10/F11, one has to mind the methods that are called and filter out jQuery (for example). The question is, I believe, whether there is some sort of configuration option that would tell the debugger to step over some files automatically, even when F11 is pressed and the answer to that one is no. – ZenMaster Oct 19 '11 at 20:55
  • @Dmitry Beransky Turns out stepping out as soon as I enter the jQuery script works just fine. It's not perfect but it gets me out of there quickly so i can resume normal debugging. If you make your comment an answer i'll mark it as correct – BumbleB2na Oct 19 '11 at 20:58
  • 7
    @ZenMaster This is true. Is a feature like that too much to ask for? Maybe I am asking for too much ;) – BumbleB2na Oct 19 '11 at 20:59
  • 2
    I like this feature: Allow ignoring certain JavaScript files when debugging. For example, don't pause on this file – orad Apr 26 '13 at 00:51
  • @orad It looks like some browsers now have this feature: http://stackoverflow.com/a/19032178/3408 – rjmunro Nov 26 '13 at 12:14
  • 1
    This feature is under development in chrome and is available to use as an experiment. See my answer below. – IsmailS Jan 12 '14 at 07:18

5 Answers5

61

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.

Skip stepping into certain javascript files

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

IsmailS
  • 10,797
  • 21
  • 82
  • 134
  • I dont have this ability on chrome 33.0 in ubuntu. Anyone know how i can enable this? – Dennis Bartlett Jan 23 '14 at 18:49
  • You mean you don't see `chrome://flags/#enable-devtools-experiments`? – IsmailS Jan 27 '14 at 04:40
  • 2
    I found chrome://flags/#enable-devtools-experiments and enabled it, but after restarting/reloading chrome and going to dev tools settings, I absolutely do not have the "Skip stepping through sources with particular names" option. It's not there. Please help. I have this version of Chrome: 33.0.1750.154 – HerrimanCoder Apr 11 '14 at 21:01
  • 1
    I hope you have not missed the 4th step? – IsmailS Apr 13 '14 at 10:04
  • hell yes for this answer. it was so annoying trying to setup out of a million methods inside of the jquery library. – Chris Hawkes Sep 06 '14 at 21:36
  • and for those wondering, if you want to skip multiple files the format for the regex is like this:`.*jquery.*|.*react.*|.*underscore.*|.*dash.*|.*parse.*` – Brad Parks Sep 18 '14 at 01:28
  • 1
    I can't find the `Show step-in candidates while debugging` option. – evanrmurphy Oct 06 '14 at 21:44
  • Have you updated your chrome? or that feature might not have been yet out of labs. So you might want to follow from step 1. – IsmailS Oct 08 '14 at 14:13
  • 2
    The answer [on this page](http://stackoverflow.com/a/25576456/26510) points out how to do it for those that can't find the option as detailed above. – Brad Parks Nov 09 '14 at 02:36
  • The debugger doesn't ignore the files at all with this technique. The only difference I see is "This script is blackboxed in debugger” when the debugger jumps into it, but still goes through it. – Antonio Brandao Jan 07 '16 at 15:36
13

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)

Buvy
  • 1,174
  • 12
  • 16
13

Things are a little bit different in the version 51.

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

enter image description here

FrenkyB
  • 6,625
  • 14
  • 67
  • 114
2

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

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

Roger
  • 333
  • 2
  • 13
0

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

Dmitry B.
  • 9,107
  • 3
  • 43
  • 64
  • 8
    This is only half the solution because it won't pause when jQuery calls a callback I have passed it (e.g. an event handler), which is frequently the kind of thing I am trying to trace. – rjmunro Nov 26 '13 at 12:06
  • Step Out is mostly useless when I find myself inside a jquery lib file -- step out often blazes me to the very end of the entire script, rather than returning me to the line right after the jquery lib was entered. – HerrimanCoder Apr 11 '14 at 20:54
  • 2
    stop downvoting just because there is a better solution now, 4 years after the question was posted. – Dmitry B. Feb 06 '15 at 01:28
  • This doesn't answer the question, and not really, we still have to click "Step Out" a lot of times. Also depends on what jQuery is doing for you. – Antonio Brandao Jan 07 '16 at 15:36
  • that was the only option at the time (5 years ago). – Dmitry B. Jan 07 '16 at 20:17