This kind of libraries (and frameworks) provide an another abstraction layer behind our code making the execution process more complex. It’s invisible until you’ll need to debug your code because of errors.
Let’s consider this simple snippet:
let $tableBody = $('.js-table-body'); _.chain(_.times(25, _.random.bind(1, 100))) .filter(x => x % 2 == 0) .map(x => $('<td>').html(x)) .map($td => $('<tr>').append($td)) .forEach($tr => $tr.appendTo($tableBody)) .value();
This part of code takes advantage of jQuery and Lodash libraries and simply put rows with the random even number into the table. Unfortunately, this logic is mixed together with third party functions. If you put the breakpoint trying to debug the flow of the chain step by step, you’ll be flipped to the library code.
To avoid exploring the third party code during debugging you can use the feature from Chrome DevTools called Blackboxing. When you reach the file you have to omit, call the context menu on source code and use the option Blackbox Script.
In Call Stack, you’ll have an information that some frames are hidden because of blackboxing the script. Now if you use Step into next function call the debugger will skip all unnecessary frames.
If you want to see the list of blackboxed scripts, you’ll simply go to Chrome DevTools -> Settings -> Blackboxing. You can also add the new blackboxed script by hand.
Tip: Use regular expressions in pattern to blackbox common scripts
As long as you don’t need to dig into some libraries or frameworks you can put them into the blackbox. Prepare your list and put into the pattern list. You can also omit all minified files by using this regular expression
This is one of the many features in Chrome DevTools that I haven’t used before because I haven’t known it even exists. It only shows that you should get to know better with tools which you use in your work. They are to make your work easy and fast.
If you know other useful features or tips, feel free to share it in comments!