Blackboxing in Chrome DevTools

Curently, I’m working on simple React/Redux application. I have Webpack bundler with hot reloading and some dependencies. At this point, debugging of this application became a little bit hard to understand.

I mean, when you are debugging such applications almost in every case you will jump stack into a source code of a library you use (in my case it’s React). If you’re using hot module replacement, then you go through the logic of HMR. That’s not okay. We don’t want to travel these Nine circles of Hell.

You’re happy man if you use Chrome DevTools (if you don’t, you definitely should try). There is a cool feature called “Blackboxing”. Blackboxing gives you a way to denote library code so that the debugger can route around it. When you blackbox a source file, the debugger will not jump into that file when stepping through code you’re debugging.