By the end of 2013 Firefox launched a tool called Black Box to their browser inspector. About a year later, Chrome did the same. If you need to carry out debugging in your code but don’t know about black boxing scripts then you should definitely give this post a read.
What is Black boxing?
black boxing allow you to disable scripts for debugging, so that you can focus on debugging the scripts that are relevant. E.g. you are debugging JavaScript an Angular/React app which is using underscore and jQuery under the hood. Most likely you have a bunch of other favorite plugins/libraries/frameworks. When we debug, we most likely don’t want to debug all those vendor scripts. Mostly, we just want to debug our own scripts or maybe just some of them. This is when black box comes in handy. We can black list all scripts that are not relevant for this debugging case.
How would we normally do it?
We would Parse through the code with the buttons that are shown in the image below.
- For next function call – step over
- To step in to next function call – step in
- To step out of this function call – step out
That’s ok but…
When ever we debug, we have to think – “Should I click step-in-to or step-over?” Also another question that strikes is – “Is this a vendor function or is it a function I wrote?”
After selection/click of “step-in-to or step-over” in next line we have to ask the same question again. So if you’re stepping through 10 lines, you have to choose between step-over or step-in-to 10 times. If you do this debugging procedure 10 times you have to ask the question 100 times. So here i guess what is the problem we’re getting at. How annoying it is as it is a minor thing that you have to do very often.
With black box we can decide beforehand. Which scripts are not relevant for this debugging? Black box them and then you don’t need to worry about stepping in to irrelevant functions. A common usage would be to black list vendor scripts for instance jQuery, backbone, AngularJs and underscore.
Let’s Understand with Example
Below given example will demonstrate the difference of debugging with and without black box.
On click of the body element, we’re fetching two elements from the DOM. One of them is undefined. We pass the elements to the function foo, and then we calculate the length on them. Since one element is undefined on-line 11 it will cause an error. This is the bug we want to hunt down as quickly as possible.
<body>
<div class="element"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
var foo = function( element, undefElement ){
element.get(0).length;
undefElement.get(0).length;
};
$('body').click( function() {
debugger;
var element = $('.element');
var undefElement = $('.undefined');
foo( element, undefElement );
});
</script>
</body>
Since we don’t want to debug inside jQuery we will black list it. Now the step-in-to button becomes something we would like to call step-in-to-if-relevant. In this case we can use step-in-to all the time without the worry of ending up in jQuery scripts. Even though we click step-in-to, the debugger will do step-over on-line 16,17 and 10,11 since they are jQuery functions.
How to use Blackbox in regards of different browsers?
Chrome
– Alt 1. Click on the cog to open up the settings view. Click the button “manage framework black boxing”. In the new pop up you can write a regexp as a path. This is great if you for example want to black box the entire vendor folder.
– Alt 2. Go to source in the inspector. Right click the file you want to black list and choose black box script.
Firefox
Go to the debugger tab in the inspector. Mark the script you want to black list. Click on the eye in the very bottom left corner.
Conclusion
This feature makes it much easier to keep your debugging in the right scope. I hope you found this article useful and it saves you some time. Do let us know in Comments if you want more of this kind of tips and tricks articles to make your work fun and easy.
Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.