The Debugger Actions (VS Code)
A Spoonful of Sugar for Debugging
I am usually so happy when I write my code, and am usually hoping to see that it functions as I imagined it would — but rarely does it do that.
I don’t hate debugging, but I sure can do with some help.
There are two tools I would like to master debugging in:
- VS Code
- Browser
The Browser is for another day, today is for VS Code.
Apart from logging values to my console, which is still my favorite way of debugging, there is another, more elegant way: The Debugger.
Here is the code I am debugging:
Run Debugger (F5)
I could either run this code, or enter the debug mode by choosing one of these:
But, this will have no impact on the way the code runs. For that we need to do this first: Setting Breakpoints
Set Breakpoints (F9)
Press Function Key 9, and it sets a breakpoint on the line that has the cursor. Alternately, we could click in the gutter space next to the line number.
Once the breakpoints are set, we can run the debugger (F5).
Debugging Options
When we run the debugger when the breakpoints are set, the program pauses at the first breakpoint.
Get Bharath Urs’s stories in your inbox
Join Medium for free to get updates from this writer.
Pausing a program is important. We could check the values of the various variables, including the ones that help for loops run.
When the program pauses, we have a few options to choose from.
Some of these buttons are easy to understand:
Continue:
This button just un-pauses the program and continues. If there are no other breakpoints, the program reaches the end of execution.
Stop (The last button):
This button stops the execution — Abruptly
Restart (Penultimate button):
Stops the program abruptly and Restarts the program
Those buttons were easy to understand. And then there are three more:
Step Over (F10):
Step Over is like Continue — but continue, once clicked, doesn’t stop until it reaches the next breakpoint or the end of the program. Step Over on the other hand, stops the execution just before the breakpoint, and from there on, it stops at each line of code. We need to click on Step Over each time we want a line to execute.
If the current line was calling a function, don’t expect the Step Over to Step Into the function — it doesn’t. Instead, it completes the function call, no matter how many lines it had, and stops at the line that follows the function call.
Step Into (F11):
And, that is why Step Into is an option. If we want to step into the function, instead of stepping over it, then we can click on Step Into.
This option will enter the function and stop at the very first line of the function. And, like Step Over, Step Into stops at each line of the code.
Step Out (Shift F11)
Let’s say we stepped into the function, and that we’ve seen enough. Now, we don’t want to see the rest of the function. We want to go back to the main function, then what?
That’s what Step Out does.
It executes the rest of the method and takes us back to the main method — particularly to the line after the function call.
Now that I’ve learnt this, I will perhaps use it as often as I imagined I would.




