Visual Studio is a great IDE for debugging any application, whether it’s a web, mobile, or a desktop application. It uses the same debugger that comes with the IDE for all three, and is very easy to follow. In this tutorial, we will learn how to debug a mobile application using Visual studio.
This article is an excerpt from the book, Mobile DevOps, written by Rohin Tak and Jhalak Modi.
Using the output window
The output window in Visual Studio is a window where you can see the output of what’s happening. To view the output window in Visual Studio, follow these steps:
- Go to View and click Output:
- This will open a small window at the bottom where you can see the current and useful output being written by Visual Studio. For example, this is what is shown in the output windows when we rebuild the application:
Using the Console class to show useful output
The Console class can be used to print some useful information, such as logs, to the output window to get an idea of what steps are being executed. This can help if a method is failing after certain steps, as that will be printed in the output window.
To achieve this, C# has the Console class, which is a static class. This class has methods such as Write() and WriteLine() to write anything to the output window. The Write() method writes anything to the output window, and the WriteLine() method writes the same way with a new line at the end:
- Look at the following screenshot and analyze how Console.WriteLine() is used to break down the method into several steps (it is the same Click event method that was written while developing PhoneCallApp):
- Add Console.WriteLine() to your code, as shown in the preceding screenshot.
- Now, run the application, perform the operation, and see the output written as per your code:
- This way, Console.WriteLine() can be used to write useful step-based outputs/logs to the output window, which can be analyzed to identify issues while debugging.
As described earlier, breakpoints are a great way to dig deep into the code without much hassle. They can help check variables and their values, and the flow at a point or line in the code.
Using breakpoints is very simple:
- The simplest way to add a breakpoint on a line is to click on the margin, which is on the left side, in front of the line, or click on the line and hit the F9 key:
- You’ll see a red dot in the margin area where you clicked when the breakpoint is set, as shown in the preceding screenshot.
- Now, run the application and perform a call button click on it; the flow should stop at the breakpoint and the line will turn yellow when it does:
- At this point, you can inspect the values of variables before the breakpoint line by hovering over them:
Setting a conditional breakpoint
You can also set a conditional breakpoint in the code, which is basically telling Visual Studio to pause the flow only when a certain condition is met:
- Right-click on the breakpoint set in the previous steps, and click Conditions:
- This will open a small window over the code to set a condition for the breakpoint. For example, in the following screenshot, a condition is set to when phoneNumber == "9900000700".
So, the breakpoint will only be hit when this condition is met; otherwise, it’ll not be hit.
Stepping through the code
When a breakpoint has been reached, the debug tools enable you to get control over the program’s execution flow. You’ll see some buttons in the toolbar, allowing you to run and step through the code:
You can hover over these buttons to see their respective names:
- Step Over (F10): This executes the next line of code. Step Over will execute the function if the next line is a function call, and will stop after the function:
- Step Into (F11): Step Into will stop at the next line in the case of a function call, allowing you to continue line-by-line debugging of the function. If the next line is not a function, it will behave the same as Step Over:
- Step Out (Shift + F11): This will return to the line where the current function was called:
- Continue: This will continue the execution and run until the next breakpoint is reached:
- Stop Debugging: This will stop the debugging process:
Using a watch
A watch is a very useful function in debugging; it allows us to see the values, types, and other details related to variables, and evaluate them in a better way than hovering over the variables.
There are two types of watch tools available in Visual Studio:
QuickWatch is similar to watch, but as the name suggests, it allows us to evaluate the values at the time. Follow these steps to use QuickWatch in Visual Studio:
- Right-click on the variable you want to analyze and click on QuickWatch:
- This will open a new window where you can see the type, value, and other details related to the variable:
- This is very useful when a variable has a long value or string that cannot be read and evaluated properly by just hovering over the variable.
Adding a watch
Adding a watch is similar to QuickWatch, but it is more useful when you have multiple variables to analyze, and looking at each variable’s value can take a lot of time.
Follow these steps to add a watch on variables:
- Right-click on the variable and click Add Watch:
- This will add the variable to watch and show you its value always, as well as reflect any time it changes at runtime.
- You can also see these variable values in a particular format for different data types, so you can have an XML value shown in XML format, or a JSON object value shown in .json format:
- It is a lifesaver when you want to evaluate a variable’s value in each step of the code, and see how it changes with every line.
To summarize, we learned how to debug a Xamarin application using Visual Studio. If you found this post useful, do check out the book Mobile DevOps, to continuously improve your mobile application development process.