debugging better using breakpoints and the output window

Debugging, love it or hate it! Debugging is a skill that you won’t learn by reading a book but a skill that you perfect through practice (cliche, am I right?). It also makes you think outside the box in order to understand the issue better. Having said that I am guilty of finding a technique and sticking with it without being aware that there are better ways. Well recently I discovered a feature in Visual Studio that is efficient and helpful. I’m talking about breakpoint actions and tracepoints. What really blew my mind is that this feature has been around for quite a few years now (hence why I said I’ll stick with a technique) but for some reason I never really discovered it or used its full potential. Consider the following program, very straight forward but with long iterations.


class Program
{
static void Main(string[] args)
{
var status = "";
for (int i = 0; i < 1000; i++)
{
if (i < 100)
{
status = "first hundred";
}
else if (i < 200)
{
status = "second hundred";
}
else if (i < 300)
{
status = "third hundred";
}
else if (i < 1000)
{
status = "the rest";
}
}
System.Diagnostics.Debug.WriteLine("end of loop");
Console.ReadLine();
}
}

Breakpoint actions

First thing we want to debug, and are interested in, is to know what the value of the iterator i is every time the value of the variable status changed. In that case we would set up a break point like below. Instead of stopping execution I decided to output the value of i in the output window.

debuggingone

Another approach, given that we are looping for a thousand times, would be to stop, or output a value, when the iteration hits a specific point. In my case when the value of i is equal to 567, and again I decided to output the value of status in the output window using string interpolation.

debuggingtwo

Writing values in the output window

Sometimes you might not be interested in stopping the execution of the program, and in that case using the output window is a good way to analyse the values of your variables. Simply add the following snippet to any point in your source code where execution is happening and you should be able to see the results in your Visual Studio output window. Be sure to have Debug selected in the drop-down list.

System.Diagnostics.Debug.WriteLine("hard coded string or " + yourVariable);

Results

After setting all your breakpoints with specific conditions, you are now ready to run the program. The outcome should be similar to the the following.

debuggingthree

That’s me done debugging for the day, hope you found this post helpful and see you in the next post.
Bjorn

debugging php with visual studio code

Besides managing this blog I also manage my rugby club’s website, Falcons RFC, a collection web pages with a basic understanding of the club’s news, sections and fixtures. A newer version of the website was developed using WordPress and was launched just this month. The vast amount of plugins and themes available for WordPress users makes developing a new website fairly easier especially if the only time available is late at night after a whole day of work and training. Having said that, there’s always that little bit of customisation that needs to be done and most of the time you have to get hands on, open a text editor and have a look at the code.

As it’s commonly known WordPress relies heavily on PHP and to be honest with you the last time I coded in PHP was some 5 years ago back in my university days and thus my PHP is a bit rusty. This means that I needed a good IDE/text editor that is capable of debugging PHP. After a quick Google research, my conclusion left me with three options; a proper PHP IDE such as PhpStorm, a text editor that supports debugging (possibly with the help of an extension), or a web browser’s extension that focuses mainly on debugging PHP such as FirePHP. I decided to go with the second option and as the title of this blog post suggests the text editor I work with is Visual Studio Code.

I haven’t used Visual Studio Code extensively but I do like the feel of this piece of software. There are loads of extensions (to make you more productive or to customise the interface), quite a strong community and it performs well too! I found this extension, PHP Debug, that at first glance looks like it can help me debug my PHP code. PHP Debug relies on XDebug, a PHP extension, in order to get the debugging up an running.

First thing you want to do, assuming you have a local web server running and PHP installed on it (in my case I have XAMPP), is create a PHP file (name it info.php for instance) and place it in the root of your local web server. Paste the following code in this PHP file and access it from your web browser by writing localhost/info.php in the address bar.


<?php
phpinfo();
?>

The output should be a list of current PHP versions, configurations, web server directories and other relevant details. Right click anywhere and then click on View Page Source. Ctrl + A, Ctrl + C and paste it in the XDebug Tailored Installation Instructions. Download the recommended DLL (if running on Windows) and paste the downloaded file in your PHP extension folder. The directory should be pointed out by the results of the XDebug Tailored Installation Instructions too. Locate your php.ini and open it with a text editor such as Notepad (Your info.php web page should tell you where your php.ini file is, in the Loaded Configuration File section). Add the following code at the bottom of the file, save and close.


[XDebug]
zend_extension="/where/you/pasted/your/xdebug.so"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Restart your web server and if Visual Studio Code was running restart it too. Being safe never hurt anyone :). From Visual Studio Code, locate the Debug tab from the left menu, click on it and then click on the Settings gear found right next to the drop down menu to open the launch.json. Two new configurations should show on screen, Listen for XDebug and Launch currently open script. Save, again just to be safe, and now you should be able to debug your PHP code. Setting a break point is done by clicking and activating a red dot just on the left of the line numbers or else right click and Add Breakpoint. Hit the F5 button to start your debugging session.

Up till now I haven’t used Visual Studio Code and PHP Debug much so I might come across some issues but following these instructions should be enough to get you going. In the meantime if I have any updates regarding this extension I’ll update it in this same blog post. If you have issues comment below and I’ll try and help you as much as I can from my end.

On a side note I would like to wish all my readers a happy new year, since Christmas is over already, and see you guys in my next blog post 🙂

Bjorn