Explain debugger steps like I'm five

Debugger steps explained

There are basically four steps we can take when debugging:

continue / resume

Resumes execution of the program till the very end (or the next breakpoint/debugger statement if there is any).

step over

If there is no function invocation in the current line the execution advances to the next line and pauses the program.
If there is a function invocation in the current line that function is executed. Then program goes to the next line and pause.

step into

If there is no function invocation in the current line the execution advances to the next line and pauses the program.
If there is a function invocation in the current line that function starts to execute. Then program advances to the first line inside that function and pause.

step out

Continues execution of the current function till the very end. Then steps out of that function and pauses the execution at the next line after the line where the function was called.

Let's look at the example code and try to use all of these steps along the way.

Example code

Below you can see a simple code we will use during our debugging session.

1 const getGreet = (name) => {
2    const greet = `Hello ${name}!`;
3    return greet;
4 }
5
6 const sayHello = (name) => {
7    debugger;
8    const greet = getGreet(name);
9    return greet;
10 };
11
12 const greeting = sayHello('Alice');
13 console.log(greeting);

Debugging session

We run our code.
At line 12 function sayHello is called.
The program stops at line 7 (debugger statement).

From there we can:

1. click continue to resume execution of the program till the very end (or the next breakpoint/debugger statement if there is any). Hello Alice! is printed in the console. Program ends.
2. click step over to advance to the next line (8) and pause the program.
3. click step into to advance to the next line (8) and pause the program.
4. click step out to continue execution of the current function (sayHello), step out of that function and pause the program at line 13 (the next line after the line where sayHello was called).

Let say we chose step over or step into and the execution advanced to the line 8. Notice that in this line getGreet function is called. From there we can:

1. click continue to resume execution of the program till the very end (or the next breakpoint/debugger statement if there is any). Hello Alice! is printed in the console. Program ends.
2. click step over to execute getGreet function, assign the returned value (Hello Alice!) to the greet variable and advance to the next line (9) and pause the program.
3. click step into to start executing getGreet function and pause the program at line 2. We're inside getGreet function now!
4. click step out to continue execution of the current function (sayHello), step out of that function and pause the program at line 13 (the next line after the line where sayHello was called).

Let say we chose step into and the execution advanced to the line 2. From there we can:

1. click continue to resume execution of the program till the very end (or the next breakpoint/debugger statement if there is any). Hello Alice! is printed in the console. Program ends.
2. click step over to advance to the next line (3) and pause the program.
3. click step into to advance to the next line (3) and pause the program.
4. click step out to continue execution of the current function (getGreet), step out of that function and pause the program at line 9 (the next line after the line where getGreet was called).

I hope you can see the pattern here.