{"id":3784,"date":"2018-07-23T01:58:09","date_gmt":"2018-07-22T20:28:09","guid":{"rendered":"https:\/\/code4developers.com\/?p=3784"},"modified":"2018-07-23T12:18:56","modified_gmt":"2018-07-23T06:48:56","slug":"debugging-with-black-box-javascript","status":"publish","type":"post","link":"https:\/\/code4developers.com\/debugging-with-black-box-javascript\/","title":{"rendered":"Debugging With Black Box &#8211; Javascript"},"content":{"rendered":"<p>By the end of 2013 Firefox launched a tool\u00a0called <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Debugger\/How_to\/Black_box_a_source\" target=\"_blank\" rel=\"noopener\">Black Box to their browser inspector<\/a>.\u00a0About a year later, <a href=\"https:\/\/developer.chrome.com\/devtools\/docs\/blackboxing\" target=\"_blank\" rel=\"noopener\">Chrome did the same<\/a>. If you need to carry out debugging in your code but don&#8217;t know about black boxing scripts then you should definitely give this post a read.<!--more--><\/p>\n<h3 id=\"what-is-black-boxing\">What is Black boxing?<\/h3>\n<p>black boxing allow you to disable scripts for debugging, so that you can focus on debugging the scripts that are relevant. E.g.\u00a0 you are debugging JavaScript an Angular\/React app which is using underscore and jQuery under the hood.\u00a0Most likely you have a bunch of other favorite plugins\/libraries\/frameworks. When we debug, we most likely don\u2019t 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.<\/p>\n<h3 id=\"how-would-we-normally-do-it\">How would we normally do it?<\/h3>\n<p>We would Parse through the code with the buttons that are shown in the image below.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3853\" data-permalink=\"https:\/\/code4developers.com\/debugging-with-black-box-javascript\/debugger\/\" data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/debugger.png?fit=219%2C174&amp;ssl=1\" data-orig-size=\"219,174\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"debugger\" data-image-description=\"&lt;p&gt;debugger&lt;\/p&gt;\n\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/debugger.png?fit=219%2C174&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/debugger.png?fit=219%2C174&amp;ssl=1\" class=\"aligncenter wp-image-3853 size-full\" src=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/debugger.png?resize=219%2C174&#038;ssl=1\" alt=\"Debugging\" width=\"219\" height=\"174\" srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/debugger.png?w=219&amp;ssl=1 219w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/debugger.png?resize=120%2C95&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/debugger.png?resize=90%2C72&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/debugger.png?resize=180%2C143&amp;ssl=1 180w\" sizes=\"auto, (max-width: 219px) 100vw, 219px\" \/><\/p>\n<ul>\n<li>For next function call &#8211; step over<\/li>\n<li>To step in to next function call &#8211; step in<\/li>\n<li>To step out of this function call &#8211; step out<\/li>\n<\/ul>\n<h3 id=\"thats-ok-but\">That&#8217;s ok but&#8230;<\/h3>\n<p>When ever we debug, we have to think &#8211; \u201cShould I click step-in-to or step-over?\u201d Also another question that strikes is \u2013 \u201cIs this a vendor function or is it a function I wrote?\u201d<\/p>\n<p>After selection\/click of &#8220;step-in-to or step-over&#8221; in next line we have to ask the same question again. So if you\u2019re 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&#8217;re getting at.\u00a0 How annoying it is as it is a minor thing that you have to do very often.<\/p>\n<p>With black box we can decide beforehand. Which scripts are not relevant for this debugging? Black box them and then you don\u2019t need to worry about stepping in to irrelevant functions. A common usage would be to black list vendor scripts for instance <a href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener\">jQuery<\/a>, <a href=\"http:\/\/backbonejs.org\" target=\"_blank\" rel=\"noopener\">backbone<\/a>, <a href=\"https:\/\/angularjs.org\/\" target=\"_blank\" rel=\"noopener\">AngularJs<\/a> and <a href=\"https:\/\/underscorejs.org\/\" target=\"_blank\" rel=\"noopener\">underscore<\/a>.<\/p>\n<h3 id=\"lets-understand-with-example\">Let&#8217;s Understand with Example<\/h3>\n<p>Below given example will demonstrate the difference of debugging with and without black box.<\/p>\n<p>On click of the body element, we\u2019re 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.<\/p>\n<pre class=\"theme:github font-size:13 show-lang:1 lang:js decode:true\">&lt;body&gt;\r\n\r\n&lt;div class=\"element\"&gt;&lt;\/div&gt;\r\n\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-2.1.4.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script&gt;\r\n\r\n\tvar foo = function( element, undefElement ){\t\t\r\n\t\telement.get(0).length;\r\n\t\tundefElement.get(0).length;\r\n\t};\r\n\r\n\t$('body').click( function() {\r\n\t\tdebugger; \r\n\t\tvar element = $('.element');\r\n\t\tvar undefElement = $('.undefined');\r\n\t\tfoo( element, undefElement );\r\n\t});\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;<\/pre>\n<p>Since we don\u2019t 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.<\/p>\n<h3 id=\"how-to-use-blackbox-in-regards-of-different-browsers\">How to use Blackbox in regards of different browsers?<\/h3>\n<h4 id=\"chrome\">Chrome<\/h4>\n<p>\u2013 Alt 1. Click on the cog to open up the settings view. Click the button \u201cmanage framework black boxing\u201d. 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.<\/p>\n<p>\u2013 Alt 2. Go to source in the inspector. Right click the file you want to black list and choose black box script.<\/p>\n<p><a href=\"https:\/\/developer.chrome.com\/devtools\/docs\/blackboxing\" target=\"_blank\" rel=\"noopener\">Read more here.<\/a><\/p>\n<h4 id=\"firefox\">Firefox<\/h4>\n<p>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.<\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/2013\/08\/new-features-of-firefox-developer-tools-episode-25\/\" target=\"_blank\" rel=\"noopener\">Read more here<\/a><\/p>\n<h3 id=\"conclusion\">Conclusion<\/h3>\n<p>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<strong> know in Comments<\/strong> if you want more of this kind of <a href=\"https:\/\/code4developers.com\/javascript-3-true-4-7-tricky-equations\/\">tips and tricks articles<\/a> to make your work fun and easy.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>By the end of 2013 Firefox launched a tool\u00a0called Black Box to their browser inspector.\u00a0About a year later, Chrome did the same. If you need to carry out debugging in&hellip;<\/p>\n","protected":false},"author":7,"featured_media":3127,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[223,224,229,225,228,226,22,227],"powerkit_post_featured":[],"class_list":{"0":"post-3784","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-black-boxing","9":"tag-blackbox","10":"tag-browser-inspector","11":"tag-chrome","12":"tag-debugger","13":"tag-firefox","14":"tag-javascript","15":"tag-jquery"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Z2","jetpack-related-posts":[{"id":4109,"url":"https:\/\/code4developers.com\/tap-for-quick-debugging\/","url_meta":{"origin":3784,"position":0},"title":"Tap for quick debugging","author":"Arif Khoja","date":"March 17, 2019","format":false,"excerpt":"This little beastie here is tap. A really useful function for quick-debugging chains of function calls, anonymous functions and, actually, whatever you just want to print. function tap(x) { console.log(x); return x; } Why would you use instead of good old\u00a0console.log? Let me show you an example: bank_totals_by_client(bank_info(1, banks), table)\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3886,"url":"https:\/\/code4developers.com\/getting-started-with-miscrosoft-visual-studio-code\/","url_meta":{"origin":3784,"position":1},"title":"Getting Started with Miscrosoft Visual Studio Code","author":"Pawan Ingale","date":"August 27, 2018","format":false,"excerpt":"The Visual Studio Code integrated development environment is a creative launching pad, that you can use to edit, debug, and build code, and then publish an app. VS Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, MacOS and Linux.\u2026","rel":"","context":"In &quot;Visual Studio&quot;","block_context":{"text":"Visual Studio","link":"https:\/\/code4developers.com\/category\/visual-studio\/"},"img":{"alt_text":"VS Code","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6797,"url":"https:\/\/code4developers.com\/functional-programming-currying\/","url_meta":{"origin":3784,"position":2},"title":"Functional Programming in Javascript &#8211; Currying","author":"Arif Khoja","date":"April 7, 2020","format":false,"excerpt":"Currying is an advanced technique of working with functions. It\u2019s used not only in JavaScript, but in other languages as well. Currying is a transformation of functions that translates a function from callable as\u00a0f(a, b, c) \u00a0into callable as\u00a0f(a)(b)(c). Currying doesn\u2019t call a function. It just transforms it.Let\u2019s see an\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"Functional-programming-js","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/04\/avatar-js.png?fit=512%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3119,"url":"https:\/\/code4developers.com\/difference-between-javascript-and-ecmascript\/","url_meta":{"origin":3784,"position":3},"title":"What\u2019s the difference between JavaScript and ECMAScript?","author":"Arif Khoja","date":"October 31, 2017","format":false,"excerpt":"I\u2019ve tried googling \u201cthe difference between JavaScript and ECMAScript.\u201d I ended up having to wade through a sea of ambiguous and seemingly conflicting results: \u201cECMAScript is a standard.\u201d \u201cJavaScript is a standard.\u201d \u201cECMAScript is a specification.\u201d \u201cJavaScript is an implementation of the ECMAScript standard.\u201d \u201cECMAScript is standardized JavaScript.\u201d \u201cECMAScript is\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2462,"url":"https:\/\/code4developers.com\/local-storage-session-storage\/","url_meta":{"origin":3784,"position":4},"title":"Local Storage and Session Storage","author":"Yatendrasinh Joddha","date":"May 22, 2017","format":false,"excerpt":"What is local Storage? local storage is property for accessing Storage object, which is used to store and retrieve data from user\u2019s browser. It is accessible only at client side not at server side like cookie. Data stored in localStorage is accessible thought all pages under same domain, until user\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2662,"url":"https:\/\/code4developers.com\/ecmascript-5-strict-mode-json\/","url_meta":{"origin":3784,"position":5},"title":"ECMAScript5 Strict Mode, JSON, and More&#8230;.","author":"Arif Khoja","date":"June 25, 2017","format":false,"excerpt":"Introduction There are a number of other new features and APIs that need attention, as well. The largest of which are\u00a0Strict Mode\u00a0and native\u00a0JSON\u00a0support. Strict Mode Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a \u201cstrict\u201d operating context. This\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3784"}],"version-history":[{"count":5,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3784\/revisions"}],"predecessor-version":[{"id":3857,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3784\/revisions\/3857"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3784"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}