Other Cool

Blackbox source files to make debugging easier.

Like everyone, you get bugs in your application code. You start debugging, but when you step through your code line-by-line, the debugger sometimes jumps into a source file that’s not your code like JQuery. I’m sure you’ve experienced the annoyance of stepping through the library code before getting back to your own application code.

The new feature called Blackboxing is available in Chrome and Firefox which makes it much easy to debug files and increase productivity. Blackbox is what it sounds like, it abstracts away the inner working of code that you shouldn’t need to spending time one. It gives you a way to tell debugger, that you dont want to go through this code which means compiler/debugger is not going to stop at every function call in that javascript file while debugging.

This simplifies the process greatly. It’s something that I think all Js Developer should know.

How to Blackbox

There are essentially two ways as of 10/18/2015.

Settings panel

Open the DevTools Settings and under Sources click Manage framework blackboxing.
In here you can set defaults for common javascript libraries and frameworks. This is the ideal way in my opinion.

Context menus

However, easiest way to is find the source file for libraries and mark them as Blackbox.

You can use the context menu when working in the Sources panel. When viewing a file you can right-click in the editor. And you can right-click on a file in the file navigator. From there choose Blackbox Script.

Demo

http://jsfiddle.net/cwtvqjL5/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s