Debug controllers and debug flow in VSCode

Hey, hey 👋 After we have learned about how to configure our debugger, let's talk more about the actual debugging controllers 🕹

Breakpoints

We will put some breakpoints

As you see, we put a breakpoint on line 12, so we will be able to receive a context of our props.
After that, you restart the page and see in the run & debug section of the VSCode the following structure. We will talk more about this section later.

On your screen, near the breakpoint will appear a yellow outline, which means that your code stopped its execution at this line

We will also get controllers:

1. Continue – An action to take in the debugger that will continue execution until the next breakpoint is reached or the program exits.
2. Step over – An action to take in the debugger that will step over a given line. The function will be executed if the string contains a function, and the result is returned without debugging each line.
3. Step In – An action to take in the debugger. If the line does not contain a function, it behaves the same as "step over" but if it does, the debugger will enter the called function and continue line-by-line debugging there.
4. Step out – An action in the debugger that returns to the line where the current function was called.
5. Restart
6. Stop

Controller demo

Continue

With "Continue", we can resume debugging to the next breakpoint you put previously.

Step over

"Step over" functionality helps us to go to the following execution line without putting a new breakpoint.

Step in

"Step in" gives us a superpower to traverse up&down in a function execution and see the function's return values in a variables section.

Step out

I'm happy that we're now familiar with essential debugging tools and ready for a new journey to something more advanced! 🚀🚀🚀