Remotely Debug Web Apps In Azure With Visual Studio

Being a developer you know the importance of being able to debug your code. No one can have a good time with development if there is no feature of debugging. Debugging the code when you are at the localhost is quite easy. But what if there is any problem in your code you couldn’t notice while developing your site. The old school solution would be to again debug it in your localhost and deploy again. Seriously? We are in the era where cloud computing is becoming as essential as heart of a human for better performance of business. So why not debug our code on cloud itself. We know the fabulous debugging feature Visual Studio has. Let’s use this to debug our site on cloud too.

Note: I have a basic ASP.NET site for demo. You might need to create a new project to go along with me.

The first thing is we need an ASP.NET site deployed in Azure. Second is we need to have remote debugging enabled in Azure Dashboard. Let’s enable that first.

Step 1: Go to configure tab of your site and scroll down to Remote Debugging section.


Figure 1: Go to Configure Tab


Figure 2: Configure Remote Debugging and Save

Step 2: Open Visual Studio and in left pane open Server Explorer and right click on Azure Node, then click on Connect to Microsoft Azure Subscription. This will prompt a login window, login with your account credentials having Azure Subscription. (I have already logged in so you can see my sites)


Figure 3: Login with your Azure Subscription account

Step 3: Expand the node labeled Azure, then App Service (in Visual Studio 2013 Update 4 +) or Websites (in Visual Studio 2013 Update 4 below).


Figure 4.1: Expand Website Nodes

Step 4: Right click on the site and click Attach Debugger.


Figure 4.2: Click Attach Debugger

Note: To be able to Attach Debugger successfully, your site needs to be deployed with the latest version of your site. And should have the same project opened in Visual Studio where you want to attach the Debugger.

Demo

I do have a textbox and button in my site, let me take the value of the textbox to Visual Studio at real time in the same way what we did while running on localhost. But for now we are doing it straight from the cloud.


Figure 5: Site Deployed

Now I will attach the debugger in my Visual Studio, then a value be entered before clicking the button. I do have a breakpoint in my code in VS.


Figure 6: Entered Value

The breakpoint which I kept in my code will now hit and when you hover over it you can see the value which you kept in the text box.


Figure 7: Breakpoint Hit

Cool! Too easy and handy for developers.

Important: How Debugging affects your Website

1. When you debug and pause at a breakpoint, you will stop your real users to view your site too. It will freeze the site and the users will think your site as unresponsive.
   
   
2. When you try to debug your site using Azure Online Debugger your site needs to be published in deploy configuration not release configuration. To deploy it in Debug build just change the settings in the Deploy box as in the following screenshot:
   
   
   Figure 8: Deploy Option

Stay tuned for more!!