One of the many useful features of Chrome Developer Tools (DevTools) is the blackbox preference. Normally when debugging code, if you step through code that references external source files (e.g., jQuery, Underscore.js, etc.), the debugger will step through that library code. Sometimes this may be good if you want to debug the library code, but most of the time, you trust the library code should be stable and you just want to focus on your code.

With the blackbox preference, DevTools can ignore or bypass any source files you choose during debugging. This means the debugger won't go into blackboxed files when stepping through code, and breakpoints in blackboxed files, if any, will also be ignored (i.e., the debugger will not pause at such breakpoints). This will save you time and minimize confusion in times where library code could generate a deep call stack.

How to blackbox

1. In DevTools, navigate to the Sources panel

2. Right click the source file you want to blacklist in the navigator pane and select Blackbox Script

   

Manage blackboxed scripts

If you ever want to add, modify, or remove blackboxes, you can do so by going into the Settings.

1. In DevTools, navigate to the Settings panel

2. Under the Sources section, click Manage framework blackboxing

   

3. In the pop-up dialog, modify blackbox scripts as you wish

   

FYI, the URI pattern can accept the following values:

• The file name, e.g., jquery.js would match any files with "jquery.js" in its name
• A regular expression, e.g., \.min\.js$ would match any files ending in "min.js"
• A reference to an entire folder, e.g., bower_components would match all files within the "bower_components" folder

You can read more information about blackboxing from the Chrome Documentation.