What is the keyword Debugger for in Javascript?

Question

I was browsing through the documentation of Ecmascript and came across the session of Keywords reserved

Follows:

The following tokens are Ecmascript Keywords and may not be used as Identifiers in Ecmascript Programs.

Keyword :: one of

break do instanceof typeof case else new var

catch finally return void continue for switch while

Debugger function this with default if throw delete in try

---

All these Keywords I know, and use, some more often, others less, but until today I had never seen this: Bugger.

I tried to apply an example of this keyword in jsfiddle but did not understand how it works. What is it for? What is its use? And when to use?

Answer 1

Is equivalent to breakpoint of other languages, it pauses the execution of the script and only works if Developer tools browser or other debugger (like in Node.js) is open, if it is not open it will have no effect.

For example, run the Snippet below and open the Developer tools, then click Test:

function a() {}
function b() {}

function foo() {
    a();
    debugger;
    b();
}

<button onclick="foo();">Executar</button>

In Chrome/Opera something like:

Note that you have Paused in Debugger, If you click the play button it will continue until you find another debugger;

In most browsers to use play you can press the F8

How to use

Of course, in the example I did above it doesn’t make much sense to use it, the idea of using breakpoint and the Debugger is you use it in several places and analyze where the error occurs, for example:

function foo() {
    a();

    debugger;

    b();

    debugger;

    c();

    debugger;

    d();

    debugger;

    code code code...
    code code code...
    code code code...

    debugger;

    code code code...

    debugger;
}

Imagine that you have multiple libraries or a huge script that you’re not understanding where the problem is, or you don’t know where the problem started, for example a variable manipulated by various scripts and functions is coming with null, then you can manually apply several debugger; combined to console and testing step by step what happens with the variable

Debugging has nothing to do directly with visual environments, it has to do with analyzing code outputs and returns, and Debugger/breakpoint is just to "pause" and you can test.

For example (of course you can use Debugger anywhere in your script):

function foo() {
    x = a();

    console.log(x);
    debugger;

    b(x);

    console.log(x);
    debugger;

    c(x);

    console.log(x);
    debugger;

    d(x);

    console.log(x);
    debugger;

    code code code...
    code code code...
    x = code code code...

    console.log(x);
    debugger;
}

If you are in a browser and you have a problem with some handling of the DOM, you put the Debugger in several places and each Debugger scan the DOM by the tab Elements.