Javascript Debugger Statement

I was working on a behemoth, yeah look it up – the word means monstrous and enormous in size. This project was more on the marketing side, so there were a lot of platforms mixing in with this project, one of them being Hubspot – a marketing software for managing leads. I’ve never worked with HubSpot before, but I was totally game.

In troubleshooting the underlying issue(s), I like to categorize projects like hurricanes – cat1, cat2, cat3, cat4, cat5. This one was a cat4. Partly because it’s history was so vague, the type of project where you’re shooting darts in the dark. But the other half was much simpler – I just had to get familiarized with Hubspot, but this is an entirely different topic. I went off tangent here for a bit. Moving on.

As I was working on some Javascript, I noticed that “debugger” statement – I’ve never seen it before. I looked it up and this statement has been available since ECMAScript 1, that’s a long time. Truthfully I wrestled with Javascript a long time and was intentionally ignorant of a lot of it’s features.

To illustrate, the debugger statement looks like this


console.log('hello');

debugger; // program will halt here, unless you take action

console.log('world');

I’m quickly reminded of the ‘use strict’ expression, yeah this is a literal expression not a statement. These are useful javascript constructs that are often under used, I myself don’t these often. Yeah I know I should at least use ‘use strict’. But a better comparison would be PHP’s die() or exit() functions in that it allows a program to terminate at specific points of your program. I’ve used this debugging method countless times and it’s helped me take down even the mightiest of behemoths.


echo 'hello';

exit(); // terminates here

echo 'world'; // to see this output, you need to comment out exit()

I found that debugger statement interesting though, I’ve seen it through Chrome Web Developer Tools, also known as a “breakpoint” and through this interface you can add multiple “breakpoints” and inspect your code. I see it like a snap shot at a specific point in time, within the execution context (more on this later in another post, a super fundamental concept).

I imagine the debugger statement is used much the same. I like this javascript feature, I was actually curious for a long while if Javascript had a built in construct for debugging scripts. Don’t get me wrong, I’m a big fan of using Web Developer tools, but I like the flexibility of using constructs.