Explain debugger steps like I'm five
Tags: debbuging, beginners
Published: 2020-05-29 00:44:00

## 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.

```javascript
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.