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:
- 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. - click
step over
to advance to the next line (8) and pause the program. - click
step into
to advance to the next line (8) and pause the program. - 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 wheresayHello
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:
- 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. - click
step over
to executegetGreet
function, assign the returned value (Hello Alice!
) to thegreet
variable and advance to the next line (9) and pause the program. - click
step into
to start executinggetGreet
function and pause the program at line 2. We're insidegetGreet
function now! - 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 wheresayHello
was called).
Let say we chose step into
and the execution advanced to the line 2. From there we can:
- 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. - click
step over
to advance to the next line (3) and pause the program. - click
step into
to advance to the next line (3) and pause the program. - 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 wheregetGreet
was called).
I hope you can see the pattern here.
Top comments (0)