Debugging in JavaScript

Step through code using the debugger in JS.

“I suppose I ought to eat or drink something or other; but the great question is ‘What?’”—Chapter 4, The Rabbit Sends in a Little Bill

Having the ability to step through code line by line has many benefits. First and foremost it helps with understanding. You can see exactly what's going on. Step by step. This gives you great power!

Sometimes it's just easier to see exactly how the data is being changed and what is happening as the code is running.

Take this codeblock for example:

function backwards(arr) {
    let blankArr = [];
    debugger;
    for (el of arr) {
        blankArr = arr[el] + blankArr;
    }
    debugger;
    console.log(blankArr);
}
backwards(arr);
Step 1.

Set the debugger where you'd like to begin inspecting your code. For example, in the above function I wanted to see what what was in the blankArr as I looped through it. Once you add your debugger statements in the code you are ready to begin inspecting.

Step 2.

To begin stepping through your code, open the terminal and type the command:

node inspect file.js

You will see a debug> prompt open up. Now you can begin stepping through the code!

To increment steps pretty use "c" - for continue.

Step 3.

Use the repl command to drop into the JavaScript shell and you can begin inspecting variables and data step by step.

Rinse and repeat!