This tutorial will cover the basics of debugging with Visual Studio. It will give you a head start at understanding how the computer works with your code and what really happens behind the scenes.
What do I mean by debugging to start with? Programming is about fixing stuff that doesn’t work, it’s a constant fight to get everything working the way we see it in our planning. Don’t let this discourage you, the pride you will get from a good working code is worth all the effort! There will be bugs in your program, many of them will be caught by the compiler meaning that you won’t be able to click on Start without Visual Studio telling you that the code cannot be run because you have Syntax error(s). These errors are the easiest to find and fix, thanks to Visual Studio!
Visual Studio will not only tell you that you have an error, but also the possible cause and even the line! The only thing that’s missing is you fixing the error!
After you click on Start and build errors were found, Visual Studio is going to show you an Error List window. This window is, as you can probably guess, a list of all the errors found in your code.
In this case, we only have one, and we know why it’s there. Positive is misspelled and Visual Studio cannot find the declaration of this misspelled variable.
This kind of bug is easy, but there are bugs that won’t be so kind with you. I am talking about especially runtime bugs which don’t appear before you (Start) compile and run you code. But don’t worry! Visual Studio has a solution to make your life easier for that too!
This feature will be your best friend when you won’t know from where a bug comes from, for example: why is that value set to 5 when I clearly set it to 4 in that method? With only a few lines of code it may seems like an easy fix issue, maybe you added 1 before displaying the value in the console. But sometimes, when the code gets a lot more complicated, it can become a mess to find that little change you made to fix something else that caused a completely different issue.
What is a breakpoint then? A breakpoint is a red dot that’s in the left margin of your code, it will stop your code during its execution and let you see what is going on at that point in time. Isn’t that wonderful! You won’t be blind to what your code is really doing anymore.
To use this magic, click in the margin on a line that is not blank (you can open the if statement exercise to try it out). The complete line will become highlighted in red just like in the image below.
You can now click on Start (F5) to run the code. What is going on now? The computer stopped its execution on the breakpoint and the line has become highlighted in yellow. This means the computer is now paused on the line we specified earlier and ready to continue its work as soon as you will give the signal.
Have a look into the toolbar at the top now, you will see 4 buttons, but we will be using two of them mostly.
In the red rectangle:
The first one is to focus on the statement to be executed – Don’t forget that the highlighted line is not executed yet, this action is not done which means you won’t see the result of this line before you continue to the next line.
The second icon is Step into (F11). If you want to dive into the method that is on the highlighted line, you can click on this button (you will have the chance to try this behavior in the next exercise to give you a better idea of the difference between this button and the next one).
The third icon is Step over. This one is important if you want to go to the next line without diving into the current method (sometimes the code will be divided in a way that the execution will go somewhere else, you will understand as we learn more in the next tutorials).
Finally, the fourth button is Step out, with this one you can step out of the method you are currently diving into. This can be useful at some point.
You should try using these buttons right now, Start the code and stop on any line. Start by using step over and see what it does. Remember that you can always use the Continue button or the Stop (red square) button if you want to skip lines or to stop the execution completely.
Hover on everything
Stay in debug mode on the line you selected, you can hover (put your mouse over and wait a second or two) on any keyword or variable to see a description and its value. For example, if I hover on Negative I can see that it’s set to False. That is before I set it to True, in other words, Visual Basic set the variable for you as soon as you declare it.
Note: it’s still a good practice to initialize all your variables to leave the less possible processing implicit (think about the next programmer who’s going to work on your code).
When in debug mode (while running your code and stopping on a breakpoint), you should see a window named Locals, if you cannot see it, go into Debug -> Windows -> Locals and it should appear.
This window displays the local scope variables with their current value(s). It can be very useful to see an unexpected change in the variables or for a quick review of what is accessible and what is not.
Here is an example of what you may find in the Locals window.
In our case, we can see both Positive and Negative variables as well as their current value at the current state of the program.
Let’s go a bit further
There are two more things I wish to show you. The breakpoint window and the Callstack window, they are both very useful but we won’t need them at the moment because they require a bit more advanced coding to really come in handy, I still want you to know that they exist!
Here is the Breakpoints window, accessible through the Debug -> Windows -> Breakpoints menu item. It can be used to create breakpoints that are way more complex than only clicking in the margin. For example we can assign break conditions or break after a number of occurence and so on. We can disable all breakpoints at once or disable only part of them with certain conditions.
A really powerful tool to be useful later.
The callstack is one window I use sometimes but that can help in case of big, complex softwares. To keep it simple, it will tell you how deep you are in the method calls and by which methods the program went to be where it stopped. It’s harder to explain at the moment, but when we will learn how methods work, it will suddenly make more sense.
At the moment, the callstack is not very big because we only went through the first method in the program. Keep this tool in mind, we will use it later as well! There are other important windows like Threads, Watch, Output and more that we will explore as we move forward.
If you are curious and would like to know more about the subject, you can always refer to another good Webpage from Microsoft.
Need more help? Feel free to comment and I will try to ask you question as best as I can!