Debugging en Blazor con Visual Code


Inspeccionar nuestro código para encontrar un error, analizar comportamientos o corregir deuda técnica es algo bastante común.

Visual code es un IDE ligero, fácil de usar y que en muchos aspectos nos permite programar mas rápido pero en este tipo de herramientas aveces se queda corto

Afortudamente para Blazor Web Assembly ya tenemos una extensión que nos permite hacer este paso a paso en el código de manera simple y con buenos resultados

El primer paso es instalar la extension de C# y la extension de BlazorWasmDebugging del siguiente link

Microsoft.AspNetCore.Razor.VSCode.BlazorWasmDebuggingExtension – Visual Studio Marketplace

Vamos luego a crear nuestro archivo de launch.json

Blazor debug visual code

Vamos agregar en este archivo la URL de nuestro sitio, de momento he tenido problemas con URL que se exponer por HTTPS por eso recomiendo usar la URL de HTTP que por defecto es localhost:5000

archivo launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",  
    "configurations": [        
        {
            "type": "blazorwasm",
            "name": "Launch and Debug Blazor WebAssembly Application",
            "request": "launch",  
            "url": "http://localhost:5000"         
        }
    ]
}

Por último debemos verificar que el archivo launchSettings.json contenga la propiedad para habilitar el proceso de debugging ( inspectUri )

 "blazorporject": {
      "commandName": "Project",
      "dotnetRunMessages": "true",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }

Deberiamos ahora poder hacer debugging dentro de nuestro código en Blazor sin incovenientes:

Blazor debugging

Guía oficial:

Debug ASP.NET Core Blazor WebAssembly | Microsoft Docs

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s