How to Set Programmatic Breakpoint in JavaScript

Modern browsers hav vast debugging capabilities. They include variable watching, code un-minifying, regular and conditional JavaScript code breakpoints. If you want to set a breakpoint to code, you need to open browser debugging console, find the subject code line and then just press the button "Place breakpoint"

But what if you want to place breakpoint in code when you actually write the code? This is much easier when you write your own code, no need to locate the code line twice (in editor and in debugger), it is persistent and more clean.

So, to place progammatic breakpoint in your JavaScript code, just use the debugger instruction:

debugger;

If the JavaScript debugger is active (i.e. developer window is open), the browser will stop on this code line.

You can even place conditional breakpoints:

if (x==5) breakpoint;

The mentioned breakpoint will stop the debugger only if x can be equalized to 5. 

JavaScript Variables Scope

In JavaScript there are two types of variables scope:

• Local scope
• Global scope

Scope determines the accessibility (visibility) of these variables.

Global variables can be accessed from any function.

The example of variable created in global scope:

 var userName = "Alice";

// code can use userName 
function myFunction1() {
    // code here can also use userName 
}
function myFunction2() {
    // code here can also use userName 
    function myFunction3() {
        // code here can also use the same userName 
    }
}

Local variables can only be accessed from the function they are declared.

// code here can NOT see userName 
function myFunction() {
    var userName = "Bob";
    // code here CAN see and use userName 
}