In modern web development, we often rely on libraries like jQuery, Ember, or Angular, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a black box. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. With black boxing, you can tell the debugger to ignore the details of selected sources.
To enable or disable black boxing for a source, select the source in the source list pane and click the eyeball icon at the bottom left:
You can black box several sources at once by opening the developer toolbar and using the dbg blackbox command:
When a source is black boxed:
- Any breakpoints it may have are disabled.
- When “Pause on Exceptions” is enabled in the Debugger settings, the debugger won’t pause when an exception is thrown in the black boxed source; instead it will wait until (and if) the stack unwinds to a frame in a source that isn’t black boxed.
- The debugger will skip through black boxed sources when stepping.