Conditional debugging with JavaScript

Conditional debugging with JavaScript is not very common, in fact, there’s no support at all for most of languages. In JavaScript we have the debugger statement, if you never heard about it, basically stops the execution in the same way if you put a breakpoint in Chrome Dev Tools.

Because we have an statement, it’s pretty easy to start debugging with conditionals.

But why I should use conditional debugging with JavaScript? There are a lot of reasons, but one of my favorite is to avoid entering in a function like 100 times waiting for that object that it’s breaking your app. For example:

function doStuffWithDOM(domObj) {
    if (domObj.id == "myObj") debugger;

    // do stuff...
}

Another handy situation could be when you have a requestAnimationFrame or a $watch in AngularJS and that function broke your app because a variable exceeds a value. For example:

function myRequestAnimationFrame() {
    // do stuff...
    if (myValue > 100) debugger;
    // do stuff...
}

Obviously, the downside of this is that you must remember to remove it when you go to production, but it should be pretty easy to make a class and globally handle this.

To use the debugger statement could save you hours of development and testing, and even better, could make you happy.