Remotely Debug Blazor App On Azure From Visual Studio

In this article, we will see how to debug a Blazor App hosted on Azure remotely, through Visual Studio 2017.

Introduction

 
Debugging an application is very important. Sometimes, you may face issues even after the application is hosted on the production server. Remote debugging is a very good option to debug the live applications. In this post, we will create a sample Blazor application and will host it on Azure. After that, we will remotely debug the live application through Visual Studio 2017.
 

About Blazor Framework

 
Blazor is a (still experimental) .NET web framework from Microsoft using C#/Razor and HTML that runs in the browser with Web Assembly. Blazor provides all the benefits of a client-side web UI framework using .NET on the client and optionally, on the server.
 
I have already written many articles on Blazor for you good people on C# Corner. If you are new to it, please refer to the below articles to get started with Blazor.

Create a Blazor project in Visual Studio 2017

We can create a new Blazor project using Visual Studio 2017 (I am using the free community edition). Currently, there are three types of templates available for Blazor. We can choose Blazor (ASP.NET Core hosted) template.

Remotely Debug Blazor App On Azure From Visual Studio
 
Please note that we are not changing any code in the default application. We can directly deploy this application to Azure.

Create Azure Web App

 
We can easily create a web app in Azure. Create a resource -> Choose Web App -> Create.
 
Remotely Debug Blazor App On Azure From Visual Studio 

We have disabled the Application Insights instrumentation in this web app. Our web app will be created in a few minutes.

Publish the Blazor app to Azure

 
Right click “Server” project and choose “Publish” option from the menu.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
Please note that for remote debugging, we must choose “Debug” mode instead of “Release” mode. So that, we must choose the “Create profile” option instead of “Publish immediately”.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
We can click the “Advanced” link and choose the “Debug” option. By default, it is as “Release”.
 
Remotely Debug Blazor App On Azure From Visual Studio
 
We can choose the web app from the list. Please note that I have already created some web apps in the same resource group.
 
Remotely Debug Blazor App On Azure From Visual Studio
 
We can click the “Publish” button to publish the Blazor app to Azure.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
After some time, our web app will be ready to use.
 
We can remotely debug the application. I have added a breakpoint in SampleDataController.cs file. This is triggered when we click the "Fetch data" button in the web app.
 

Open Cloud Explorer to enable Remote Debug

 
You must open the Cloud Explorer to enable remote debugging. You can find the option from View -> Cloud Explorer.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
Select the web app from resource group and click “Attach Debugger” to enable remote debugging.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
After some time, our application is ready with remote debugging.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
We can click the “Fetch data” link. It will enable the remote debugging. Because, I have already added a breakpoint in the controller class source code. Please note that the breakpoint is hit now.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
At the same time, the "Continue" button is also enabled in the toolbar.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
We can click the “Continue” button to proceed. You will get the data from the controller.
 
Remotely Debug Blazor App On Azure From Visual Studio
If you make any changes in the source code and again attach the debugger, you will get the below message in the breakpoint.
 
Remotely Debug Blazor App On Azure From Visual Studio 
 
You can’t debug the application now. You must deploy the application to Azure again and attach the debugger.
 

Conclusion

 
I hope now you understand the concept of remote debugging in Blazor apps hosted on Azure. We have successfully created a Blazor app and hosted on Azure and remotely debugged the application in Visual Studio 2017. You can try it on your system and if you face any issues, please inform me with your comments.