Replacing console logs with debugger; and using conditional breakpoints

DanielOctober 22, 2020

If you are like me and still slipping back to the nasty habit of using too much the console.log(); statements for debugging in Javascript this video was of real help.

Something did not feel natural for me to go in the devtools, find the troublesome block of code and add there a breakpoint.

Being in the code editor all the time, was much more easy just to drop a few console.log() statements in there. More easy yes, but for sure not more productive.

But it turns out that if you drop a debugger; statement (min 1.20 in the video) it triggers the breakpoint with full access to the debugging tools.

Another cool trick in the video is are the usage of the conditional breakpoints (min 3.00) from the dev tools.

But you can use this that also with the debugger; as well:

for (let counter = 1; counter < 10; counter++) {
    // more complex code here
    if (foo === 5) {
        // activate the brekpoint only  when foo is 5
        debugger; 
    }
}

So, welcome debugger and bye-bye console.log().