Debugging

By Ashwin Venugopal -

 






Debugging Blazor Server

  • Right-click on MyBlogServerSide and click Set As Startup project.

  • Press F5 to start the project.

  • Using the web browser, navigate to https://localhost:5001/ throwexception (the port number may vary).

  • Press F12 to show the web browser developer tools.

  • In the developer tools, click Console.

  • Click the Throw exception button on our page.

  • Press F5 to continue and switch back to the web browser. We should now be able to see the exception message in the developer tools.

Now let's try a breakpoint:

  • In Visual Studio, open MyBlog.Shared/Pages/Index.razor.

  • Anywhere in the LoadPosts method, set a breakpoint by clicking the leftmost border (making a red dot appear). We can also add a breakpoint by pressing F9.

  • Go back to the web browser and navigate to https://localhost:5001/ (the port number may vary).

  • Visual Studio should now trigger the breakpoint, and by hovering over the variables, we should be able to observe their current values.

Debugging Blazor WebAssembly

Blazor WebAssembly is certainly capable of debugging, but there are a few considerations we should keep in mind. Because our exception page resides in the shared library, we can directly proceed to debugging. But let's start with breakpoints:

  • Right-click on MyBlogWebAssembly.Server and select Set as Startup Project.

  • Press F5 to debug the project.

Breakpoints won't get hit on the initial page load in Blazor WebAssembly. We need to navigate to another page and back to the index page again for it to hit. Debugging Blazor WebAssembly is made possible by the following line of code in the launchsetting.json file:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_ framework/debug/ws-proxy?browser={browserInspectUri}"

We can also put breakpoints in our MyBlogWebAssembly.Server server project if we want to and they will get hit just as we would expect. Now let's see what happens with our exception:

  • In the web browser, navigate to https://localhost:5001/ throwexception.

  • Click the Throw exception button.

  • The unhandled exception won't get hit in Visual Studio. We get the exception in the developer tools in the web browser.

The debugging experience in Blazor WebAssembly is simply not as polished as with Blazor Server but it is polished enough to be able to get the job done.

Debugging Blazor WebAssembly In The Web Browser

The first debugging experience for Blazor WebAssembly was the ability to debug right in the web browser:

In Visual Studio, start the project by pressing Ctrl + F5 (run without debugging).

In the web browser, press Shift + Alt + D. We will get an error message with instructions on how to start the web browser in debug mode. The way to start Edge would be something like this-

Msedge --remote-debugging-port=9222 --user-data-dir="C:\ Users\Jimmy\AppData\Local\Temp\blazor-edge-debug" --no-first-run https://localhost:5001/ Copy the command.

Press Win + R and paste the command.

A new instance of Chrome or Edge will open. In this new instance, press Shift + Alt + D.

We should now see a source tab containing C# code from our project. From here, we can put breakpoints that will be hit, and we can hover over variables.

Hot Reload (almost the real thing)

With .NET 5, we got the ability to reload our Blazor site when we make changes to a code file. Users have asked for hot reload and Microsoft is aiming to release hot reload in the .NET 6 timeframe. To set this up, do the following:

  • In Visual Studio, select the Tools menu and then Options.

  • Select Projects and Solutions and then ASP.NET Core.

  • In the right box under the General heading, change the value of the Auto build and refresh option to Auto build and refresh browser after saving the changes.

  • Right-click on MyBlogServerSide and select Set as Startup project.

  • Now run the project by pressing Ctrl + F5 (it only works without debugging).

  • In the web browser, bring up the counter page by adding /counter to the URL.

  • Make a change to the Pages/Counter.razor file and click Save.

This also works from the command line by running the following command-

dotnet watch run

There are a couple of limitations to this method though:

  • It doesn't work with Blazor WebAssembly running an ASP.NET server backend. For this to work, we need to manually reload the browser.

  • The state of the application will restart.

  • Changes in a shared project won't be reflected.

Conclusion

We have successfully looked at different ways to debug our Blazor application.









































Comments

Post a Comment

Popular posts from this blog

Information Protection Scanner: Resolve Issues with Information Protection Scanner Deployment

By Ashwin Venugopal -
Image
  About If you are experiencing problems with the Microsoft Purview Information Protection scanner, check the health of your deployment by utilizing the Start-ScannerDiagnosticsPowerShell cmdlet to start the scanner diagnostic tool. The diagnostics tool checks the following details and then creates a log files with the results: Whether the database is up to date. Whether network URLs are accessible. Whether there's a valid authentication token and policy can be acquired. Whether the profile is defined in the Azure portal. Whether offline/online configuration exists and can be acquired. Whether the rules configured are valid.  The Start-ScannerDiagnostics command does not perform a comprehensive check of prerequisites. If you encounter problems with the scanner, you need to verify that your system meets the scanner's requirements, and that your scanner's configuration and installation are finished.  Verify Scanning Details Per Scanner Node and Repository Run the Get-ScanSt...
Read more

How AMI Store & Restore Works?

By Ashwin Venugopal -
Image
  CreateStoreImageTask The CreateStoreImageTask API stores an AMI as a single object in an S3 bucket. The API initiates a task that collects all the data from the AMI and its associated snapshots, subsequently using an S3 multipart upload to store this data in an S3 object. It gathers all elements of the AMI, including most of the non-Region-specific metadata and all EBS snapshots included in the AMI, and consolidates them into a single object in S3. During the upload process, the data is compressed to minimize the space utilized in S3, which means that the S3 object could be smaller than the total sizes of the snapshots in the AMI. If the account making this API call has access to AMI and snapshot tags, they will be retained. The S3 object shares the same ID as the AMI, except it has a .bin extension. Additionally, the S3 metadata tags for the object include the AMI name, AMI description, AMI registration date, AMI owner account, and a timestamp indicating when the store operation...
Read more

Create A Store Image Task

By Ashwin Venugopal -
Image
  Introduction When you save an AMI in an S3 bucket, a task for storing the image is initiated. This store image task allows you to track the progress and result of the procedure. Securing your AMIs It is crucial to verify that the S3 bucket is set up with adequate security to protect the content of the AMI and that this security is upheld for the entire duration that the AMI objects are stored in the bucket. If this cannot be achieved, it is advisable to refrain from using these APIs. Make sure that public access to the S3 bucket is prohibited. It is suggested to activate Server-side encryption for the S3 buckets where you keep the AMIs, even though it’s not mandatory. When AMI snapshots are transferred to the S3 object, they are sent over TLS connections. It is possible to save AMIs that contain encrypted snapshots; however, the snapshots will be decrypted during the storing process. Identify the source AMI used to create a new Amazon EC2 AMI You can determine the AMI that was us...
Read more