Remotely Debug Blazor App On Azure From Visual Studio

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.

• Single Page Application With Blazor And CosmosDB
• Blazor - CRUD Using PostgreSQL And Entity Framework Core
• Blazor - Connect With Amazon DynamoDB Using AWS SDK
• Blazor - Work With Cassandra API In Cosmos DB
• Localization In Blazor App Using Microsoft.JSInterop
• Blazor - Create SPA With Azure Database For MariaDB Server
• Blazor - Connect With Oracle Database In Amazon RDS
• Get C# Corner RSS Feeds In Blazor Project
• C# Corner RSS Feeds In Blazor With Pagination
• Deploy Blazor Application On AWS Cloud Using Elastic Beanstalk
• Azure Redis Cache With Azure SQL In Blazor Project
• Single Page Application In Blazor With Azure Table Storage
• Create A Simple Chart By Date For The Latest C# Corner Article Count 

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.

 

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.

 

 

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.

 

 

 

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”.

 

 

 

We can click the “Advanced” link and choose the “Debug” option. By default, it is as “Release”.

 

 

We can choose the web app from the list. Please note that I have already created some web apps in the same resource group.

 

 

We can click the “Publish” button to publish the Blazor app to Azure.

 

 

 

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.

 

 

 

Select the web app from resource group and click “Attach Debugger” to enable remote debugging.

 

 

 

After some time, our application is ready with remote debugging.

 

 

 

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.

 

 

 

At the same time, the "Continue" button is also enabled in the toolbar.

 

 

 

We can click the “Continue” button to proceed. You will get the data from the controller.

 

If you make any changes in the source code and again attach the debugger, you will get the below message in the breakpoint.

 

 

 

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.