4 Things Web Developers Need to Know about Debugging in Visual Studio 2013

If there’s one thing I’ve learned as a .NET web developer, it’s that pages rarely work correctly the first time they’re built. They will, reliably, have multiple problems that can require hours of debugging to fix. The debugging tools at your disposal can make a significant impact on the level of frustration you’ll experience. With the release of Visual Studio 2013, I was interested to see what Microsoft had done to improve the 2012 debugging experience. Although the list of enhancements may not be as impressive as what was new in the 2012 version, I’ve still identified four useful new features for web developers using Visual Studio 2013.

Return Value Inspection

When stepping through lines of code in VS 2013, the Autos window can now show direct return values for each function – as well as returns values for embedded functions that may be passed in as parameters. Take the following code:

In this scenario, I’ve set a break point at a line of code that calls a function that takes in as parameters the results of two other functions. Once I press F10 to move to the next line, the Autos window shows both the direct and the embedded return values:

This feature makes it easier to inspect the chain of values where not all of the returned values are stored in local variables. Although the inspection was possible prior to VS 2013 via entering the code manually in a Watch window, this saves you a step by showing you the values automatically.

Just My Code (JavaScript/C++)

Those who have used previous versions of Visual Studio are likely familiar with the “Just My Code” feature for .NET Framework languages (C#, Visual Basic, etc.), which lets the developer step over any non-user code and condenses these calls in the call stack, creating a simplified debugging experience. Microsoft has expanded this functionality to work with JavaScript and C++.

Note: This example covers only Just My Code for JavaScript. You can also see an example in C++.

Take the following code:

This code uses jQuery to iterate through a JSON collection (sourceRestaurant.MenuItems) and push each item to a new array. If you’re debugging in Visual Studio 2012 or earlier, then stepping into the code from the above breakpoint will take you to your jQuery file:

Most of the time, this is not very helpful. In Visual Studio 2013, as long as Just My Code is enabled, then stepping into the code will take you directly inside the loop, skipping the jQuery call:

It’s important to note that Just My Code for JavaScript only works with Internet Explorer 11. Other browsers and previous versions of Internet Explorer will not work.

Code Map Debugging

Developers using Visual Studio 2013 Ultimate are able to create code maps in order to give a visual representation of the call stack (code maps currently are available in C#, Visual Basic, JavaScript, and C++). First, you set a breakpoint. When the debugger breaks, you click “Code Map” in the debugging toolbar (or alternatively press Ctrl+Shift+`):

This will open up a window showing the Code Map of the debugger’s current spot:

The Code Map shows how we arrived at the current location and indicates the current debugger location with a yellow arrow:

As you continue to step through your code, the Code Map will refresh automatically:

Right-clicking on any box in the Code Map will allow you to select from several options, including navigating to the method definition, finding references, and adding a comment:

I’ve only covered a fraction of what the Code Map has to offer. Check out a detailed walk-through of the Code Map feature.

Edit and Continue for 64-bit Applications

Developers: you asked, and Microsoft answered. The popular Edit and Continue feature is now enabled for C#/VB applications targeting 64-bit environments in Visual Studio 2013.  For those unfamiliar with Edit and Continue, this feature allows you to make code changes without having to restart the application. Edit and Continue can be enabled by opening your web application’s properties:

And then under the “Web” tab, check “Enable Edit and Continue”:

Want to Know More?

In this post, I’ve covered my four favorite new features to the debugger in Visual Studio 2013. But that’s not all that the latest VS update has to offer—you can also learn more about new debugger features. For other questions, feel free to leave a comment in the box below or contact us on Twitter at @CrederaMSFT.

• Javascript
• Visual Studio 2013
• Debugging
• Return Value Inspection
• C++
• VS 2013
• 64-bit Applications