Depuración de Blazor WebAssembly en ASP.NET Core

Artículo
11/01/2021
25 minutos para leer

Las aplicaciones Blazor WebAssembly se pueden depurar con las herramientas de desarrollo del explorador en exploradores basados en Chromium (Edge/Chrome). También puede depurar la aplicación con los siguientes entornos de desarrollo integrado (IDE):

Visual Studio
Visual Studio para Mac
Visual Studio Code

Entre los escenarios disponibles se incluyen los siguientes:

Establecimiento y eliminación de puntos de interrupción.
Ejecute la aplicación con compatibilidad de depuración en IDE.
Examine el código en un solo paso.
Reanude la ejecución de código con un método abreviado de teclado en IDE.
En la ventana Variables locales, observe los valores de las variables locales.
Vea la pila de llamadas, incluidas las cadenas de llamadas entre JavaScript y .NET.

Por ahora, no puede:

Interrumpir las operaciones ante excepciones no controladas.
Alcanzar puntos de interrupción durante el inicio de la aplicación antes de que se ejecute el proxy de depuración. Esto incluye los puntos de interrupción de Program.cs y los de los métodos de ciclo de vida OnInitialized{Async} de los componentes que se cargan en la primera página solicitada por la aplicación.
Depure en escenarios no locales; por ejemplo, el Subsistema de Windows para Linux (WSL) o Visual Studio Codespaces.
Recompile automáticamente la aplicación Server de back-end de una solución Blazor WebAssembly hospedada durante la depuración, por ejemplo, mediante la ejecución de la aplicación con dotnet watch run.

Requisitos previos

La depuración requiere cualquiera de los exploradores siguientes:

Google Chrome (versión 70 o posterior) (predeterminado)
Microsoft Edge (versión 80 o posterior)

Asegúrese de que los firewalls o servidores proxy no bloquean la comunicación con el proxy de depuración (proceso NodeJS). Para más información, vea la sección Configuración de firewall.

Los usuarios de Visual Studio Code requieren las siguientes extensiones:

Extensión de C# para Visual Studio Code
Extensión de depuración WASM de Blazor (al usar la versión 1.23.9 de la extensión de C# para Visual Studio Code u otra posterior)

Después de abrir un proyecto en VS Code, puede recibir una notificación en la que se indique que se requiere una configuración adicional para habilitar la depuración. Instale las extensiones necesarias de Visual Studio Marketplace, si se le solicita que lo haga. Para inspeccionar las extensiones instaladas, abra Ver > Extensiones en la barra de menús o seleccione el icono Extensiones en la barra lateral Actividad.

Visual Studio para Mac requiere la versión 8.8 (compilación 1532) o una posterior:

Instale la versión más reciente de Visual Studio para Mac seleccionando el botón Descargar Visual Studio para Mac en Microsoft: Visual Studio para Mac.
Seleccione el canal Vista preliminar en Visual Studio. Para obtener más información, vea Instalación de la versión más reciente de Visual Studio para Mac.

Nota

Apple Safari en macOS no se admite actualmente.

Depuración de una aplicación Blazor WebAssembly independiente

Para habilitar la depuración de una aplicación Blazor WebAssembly, actualice el archivo launchSettings.json del proyecto de inicio para incluir la propiedad inspectUri siguiente en cada perfil de inicio:

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

Una vez que lo actualice, el archivo launchSettings.json debe ser similar a este ejemplo:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "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"
        }
      }
    }
  }

La propiedad inspectUri:

Permite que el IDE detecte que la aplicación es una aplicación Blazor WebAssembly.
Indica a la infraestructura de depuración de scripts que se conecte al explorador a través del proxy de depuración de Blazor.

El marco de trabajo proporciona los valores de marcador de posición para el protocolo WebSocket (wsProtocol), el host (url.hostname), el puerto (url.port) y el identificador URI del inspector en el explorador iniciado (browserInspectUri).

Para depurar una aplicación Blazor WebAssembly en Visual Studio:

Cree una nueva solución de Blazor WebAssembly hospedada.
Con el proyecto Server seleccionado en el Explorador de soluciones, presione F5 para ejecutar la aplicación en el depurador.
Nota

Al realizar una depuración con un explorador basado en Chromium, como Google Chrome o Microsoft Edge, puede que se abra una nueva ventana del navegador con un perfil distinto para la sesión de depuración, en vez de abrir una pestaña en una ventana existente con el perfil del usuario. Si la depuración con el perfil del usuario es un requisito, adopte uno de estos enfoques:
- Cierre todas las instancias abiertas del navegador antes de presionar F5 para iniciar la depuración.
- Configure Visual Studio para iniciar el explorador con el perfil del usuario. Para obtener más información sobre este enfoque, vea La depuración de WASM para Blazor en Visual Studio inicia Edge con otro directorio de datos del usuario (dotnet/aspnetcore #20915).
Nota

No admite Iniciar sin depuración (Ctrl+F5). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción.
En Visual Studio, revise el valor del campo currentCount en la ventana Variables locales.
Presione F5 para continuar la ejecución.

Al depurar una aplicación de Blazor WebAssembly, también puede depurar el código del servidor:

Establezca un punto de interrupción en la página Pages/FetchData.razor de OnInitializedAsync.
Establezca un punto de interrupción en WeatherForecastController en el método de acción Get.
Vaya a la página Fetch Data para alcanzar el primer punto de interrupción en el componente FetchData justo antes de que emita una solicitud HTTP al servidor.
Presione F5 para continuar la ejecución y, luego, alcance el punto de interrupción en el servidor en WeatherForecastController.
Vuelva a presionar F5 para permitir que la ejecución continúe y ver la tabla de pronóstico meteorológico representada en el explorador.

Nota

Los puntos de interrupción no se alcanzan durante el inicio de la aplicación antes de que se ejecute el proxy de depuración. Esto incluye los puntos de interrupción de Program.cs y los de los métodos de ciclo de vida OnInitialized{Async} de los componentes que se cargan en la primera página solicitada por la aplicación.

Si la aplicación se hospeda en una ruta de acceso base de la aplicación distinta de /, actualice las propiedades siguientes en Properties/launchSettings.json para reflejar la ruta de acceso base de la aplicación:

applicationUrl:

"iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

inspectUri de cada perfil:

"profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Los marcadores de posición en la configuración anterior:

{INSECURE PORT}: puerto no seguro. De forma predeterminada, se proporciona un valor aleatorio, pero también se permite un puerto personalizado.
{APP BASE PATH}: ruta de acceso base de la aplicación.
{SECURE PORT}: puerto seguro. De forma predeterminada, se proporciona un valor aleatorio, pero también se permite un puerto personalizado.
{PROFILE 1, 2, ... N}: perfiles de configuración de inicio. Normalmente, una aplicación especifica más de un perfil de forma predeterminada (por ejemplo, un perfil para IIS Express y un perfil de proyecto, que se usa en el servidor de Kestrel).

En los ejemplos siguientes, la aplicación se hospeda en /OAT con una ruta de acceso base de la aplicación configurada en wwwroot/index.html como <base href="/OAT/">:

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/OAT/_framework/debug/ws-proxy?browser={browserInspectUri}",

Para obtener información sobre el uso de una ruta de acceso base de la aplicación personalizada para las aplicaciones de Blazor WebAssembly, vea Hospedaje e implementación de ASP.NET Core Blazor.

Depuración de una aplicación independiente Blazor WebAssembly

Para obtener información sobre cómo configurar recursos de VS Code en la carpeta .vscode, consulte la guía del sistema operativo Linux en Herramientas para ASP.NET Core Blazor.

Abra la aplicación independiente Blazor WebAssembly en VS Code.

Puede recibir una notificación que indica que se requiere más información para habilitar la depuración:

Se necesita una configuración adicional para depurar aplicaciones Blazor WebAssembly.

Si recibe la notificación:
- Confirme que está instalada la extensión de C# para Visual Studio Code más reciente. Para inspeccionar las extensiones instaladas, abra Ver > Extensiones en la barra de menús o seleccione el icono Extensiones en la barra lateral Actividad.
- Al usar la versión 1.23.9 u otra posterior de la extensión de C# para Visual Studio Code, confirme que está instalada la extensión de depuración WASM de Blazor más reciente. Para inspeccionar las extensiones instaladas, abra Ver > Extensiones en la barra de menús o seleccione el icono Extensiones en la barra lateral Actividad.
- Confirme que está habilitada la depuración de JavaScript en versión preliminar. Abra la configuración en la barra de menús (Archivo > Preferencias > Configuración). Busque con las palabras clave debug preview. En los resultados de la búsqueda, establezca o confirme que la casilla Debug > JavaScript: Use Preview (Depurar > JavaScript: Usar versión preliminar) está activada. Si la opción para habilitar la depuración de vista previa no está presente, actualice a la versión más reciente de VS Code o instale la extensión del depurador de JavaScript (VS Code 1.46 o versiones anteriores).
- Recargue la ventana.
Para iniciar la depuración, use el método abreviado de teclado F5 o el elemento de menú.

Nota

No admite Iniciar sin depuración (Ctrl+F5). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.
Cuando se le pida, seleccione la opción Blazor WebAssembly Debug (Depuración de Blazor WebAssembly) para iniciar la depuración.
Se inicia la aplicación independiente y se abre un explorador de depuración.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción.

Nota

Depuración de una aplicación hospedada Blazor WebAssembly

Para obtener instrucciones sobre cómo configurar VS Code en la carpeta .vscode y dónde colocar la carpeta .vscode en la solución, consulte la guía del sistema operativo Linux en Herramientas para ASP.NET Core Blazor.

Nota

Solo la depuración del explorador se admite en este momento.

No puede recompilar automáticamente la aplicación Server de back-end de una solución Blazor WebAssembly hospedada durante la depuración, por ejemplo, mediante la ejecución de la aplicación con dotnet watch run.

Adjuntar a una sesión de depuración existente

Para adjuntar a una aplicación Blazor en ejecución, cree un archivo launch.json con la configuración siguiente:

{
  "type": "blazorwasm",
  "request": "attach",
  "name": "Attach to Existing Blazor WebAssembly Application"
}

Nota

Solo se permite adjuntar a una sesión de depuración en el caso de las aplicaciones independientes. Para usar la depuración de pila completa, debe iniciar la aplicación desde VS Code.

Opciones de configuración de inicio

Estas opciones de configuración de inicio son compatibles con el tipo de depuración blazorwasm (.vscode/launch.json).

Opción	Descripción
`request`	Use `launch` para iniciar y adjuntar una sesión de depuración a una aplicación Blazor WebAssembly o `attach` para adjuntar una sesión de depuración a una aplicación que ya está en ejecución.
`url`	La dirección URL que se va a abrir en el explorador durante la depuración.
`browser`	El explorador que se va a iniciar para la sesión de depuración. Se establece en `edge` o `chrome`. Tiene como valor predeterminado `chrome`.
`trace`	Se usa para generar registros desde el depurador de JS. Se establece en `true` para generar registros.
`hosted`	Se debe establecer en `true` si se inicia y depura una aplicación hospedada Blazor WebAssembly.
`webRoot`	Especifica la ruta de acceso absoluta del servidor web. Se debe establecer si una aplicación se envía desde una subruta.
`timeout`	El número de milisegundos que se esperarán para adjuntar la sesión de depuración. El valor predeterminado es 30 000 milisegundos (30 segundos).
`program`	Una referencia al archivo ejecutable para ejecutar el servidor de la aplicación hospedada. Se debe establecer si `hosted` es `true`.
`cwd`	El directorio de trabajo en el que se va a iniciar la aplicación. Se debe establecer si `hosted` es `true`.
`env`	Las variables de entorno que se van a proporcionar al proceso iniciado. Solo se aplica si `hosted` está establecido en `true`.

Configuraciones de inicio de ejemplo

Inicio y depuración de una aplicación independiente Blazor WebAssembly

{
  "type": "blazorwasm",
  "request": "launch",
  "name": "Launch and Debug"
}

Adjuntar a una aplicación en ejecución en una dirección URL especificada

{
  "type": "blazorwasm",
  "request": "attach",
  "name": "Attach and Debug",
  "url": "https://localhost:7268"
}

Para depurar una aplicación Blazor WebAssembly en Visual Studio para Mac, haga lo siguiente:

Cree una aplicación hospedada Blazor WebAssembly de ASP.NET Core.
Presione ⌘+↩ para ejecutar la aplicación en el depurador.

Nota

No se admite la opción Iniciar sin depurar (⌥+⌘+↩). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.

Importante

El explorador seleccionado para la sesión de depuración debe ser Google Chrome o Microsoft Edge.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción:
En Visual Studio, revise el valor del campo currentCount en la ventana Variables locales.
Presione ⌘+↩ para continuar la ejecución.

Al depurar una aplicación de Blazor WebAssembly, también puede depurar el código del servidor:

Establezca un punto de interrupción en la página Pages/FetchData.razor de OnInitializedAsync.
Establezca un punto de interrupción en WeatherForecastController en el método de acción Get.
Vaya a la página Fetch Data para alcanzar el primer punto de interrupción en el componente FetchData justo antes de que emita una solicitud HTTP al servidor.
Presione ⌘+↩ para continuar la ejecución y, luego, alcance el punto de interrupción en el servidor en WeatherForecastController.
Vuelva a presionar ⌘+↩ para permitir que la ejecución continúe y ver la tabla de pronóstico meteorológico representada en el explorador.

Nota

Para obtener más información, vea Depuración con Visual Studio para Mac.

Depuración en el explorador

La guía de esta sección se aplica a Google Chrome y Microsoft Edge en Windows.

Ejecute una compilación de depuración de la aplicación en el entorno de desarrollo.
Inicie un explorador y vaya a la dirección URL de la aplicación (por ejemplo, https://localhost:7268).
En el explorador, intente iniciar la depuración remota; para ello, presione Mayús+Alt+D.

El explorador debe ejecutarse con la depuración remota habilitada, lo cual no es el valor predeterminado. Si la depuración remota está deshabilitada, aparece una página de error que informa de que no se puede encontrar la pestaña del explorador depurable con instrucciones para iniciar el explorador con el puerto de depuración abierto. Siga las instrucciones del explorador, que abre una nueva ventana del explorador. Cierre la ventana anterior del explorador.

Una vez que el explorador se ejecute con la depuración remota habilitada, el método abreviado de teclado de depuración del paso anterior abre una nueva pestaña del depurador.
Tras unos instantes, en la pestaña Orígenes se mostrará una lista de los ensamblados .NET de la aplicación en el nodo file://.
En el código de componente (archivos .razor) y los archivos de código de C# (.cs), se alcanzan los puntos de interrupción establecidos cuando se ejecuta el código. Una vez que se haya alcanzado un punto de interrupción, examine el código una vez (F10) o reanude (F8) la ejecución del código con normalidad.

Blazor proporciona un proxy de depuración que implementa el protocolo Chrome DevTools y aumenta el protocolo con información específica de .NET. Cuando se presiona el método abreviado de teclado de depuración, Blazor apunta a Chrome DevTools en el proxy. El proxy se conecta a la ventana del explorador que se quiere depurar (de ahí la necesidad de habilitar la depuración remota).

Mapas de origen del explorador

Los mapas de origen del explorador permiten al explorador volver a asignar los archivos compilados a sus archivos de código fuente originales y se suelen usar para la depuración del lado cliente. Sin embargo, en la actualidad Blazor no asigna C# directamente a JavaScript o WASM. En su lugar, Blazor realiza la interpretación de IL en el explorador, por lo que los mapas de origen no son pertinentes.

Configuración de firewall

Si un firewall bloquea la comunicación con el proxy de depuración, cree una regla de excepción de firewall que permita la comunicación entre el explorador y el proceso NodeJS.

Advertencia

La modificación de una configuración de firewall debe realizarse con cuidado para evitar la creación de vulnerabilidades de seguridad. Aplique con cuidado las instrucciones de seguridad, siga las recomendaciones de seguridad y respete las advertencias realizadas por el fabricante del firewall.

Permitir la comunicación abierta con el proceso NodeJS:

Abre el servidor de Node en cualquier conexión, en función de la configuración y las funcionalidades del firewall.
Podría ser arriesgado en función de la red.
Solo se recomienda en los equipos de los desarrolladores.

Si es posible, permita solo la comunicación abierta con el proceso NodeJS en redes privadas o de confianza.

Para obtener instrucciones de configuración del Firewall de Windows, vea Crear una regla de programa o servicio de entrada. Para más información, vea Firewall de Windows Defender con seguridad avanzada y los artículos relacionados en la serie de documentos sobre el Firewall de Windows.

Solucionar problemas

Si se encuentra con errores, las sugerencias siguientes pueden ser útiles:

En la pestaña Depurador, abra las herramientas para desarrolladores en el explorador. En la consola, ejecute localStorage.clear() para quitar los puntos de interrupción.
Confirme que instaló el certificado de desarrollo HTTPS de ASP.NET Core y que es de confianza. Para obtener más información, vea Aplicación de HTTPS en ASP.NET Core.
Visual Studio requiere la opción Habilitar depuración de JavaScript para ASP.NET (IE, Edge y Chrome) , en Herramientas > Opciones > Depuración > General. Es el valor predeterminado para Visual Studio. Si la depuración no funciona, confirme que la opción está seleccionada.
Si su entorno usa un proxy HTTP, asegúrese de que localhost esté incluido en la configuración de omisión del proxy. Esto puede hacerse al establecer la variable de entorno NO_PROXY en alguna de las siguientes opciones:
- Archivo launchSettings.json del proyecto.
- En el nivel de usuario o de entorno del sistema para que se aplique a todas las aplicaciones. Si usa una variable de entorno, reinicie Visual Studio para que el cambio surta efecto.
Asegúrese de que los firewalls o servidores proxy no bloquean la comunicación con el proxy de depuración (proceso NodeJS). Para más información, vea la sección Configuración de firewall.

Puntos de interrupción de `OnInitialized{Async}` no ejecutados

El proxy de depuración del marco de Blazor tarda poco tiempo en iniciarse, por lo que es posible que no se ejecuten los puntos de interrupción en los métodos de ciclo de vida OnInitialized{Async}. Se recomienda agregar un retraso al principio del cuerpo del método para dar al proxy de depuración un tiempo para que se inicie antes de que se ejecute el punto de interrupción. Puede incluir el retraso según una directiva de compilador if para asegurarse de que el retraso no está presente en una compilación de versión de la aplicación.

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Tiempo de espera de Visual Studio (Windows)

Si Visual Studio inicia una excepción relacionada con que el adaptador de depuración no ha podido iniciarse en la que se menciona que se ha alcanzado el tiempo de espera, puede ajustar el tiempo de espera con una configuración del Registro:

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

El marcador de posición {TIMEOUT} del comando anterior se expresa en milisegundos. Por ejemplo, un minuto se asigna como 60000.

Visual Studio
Visual Studio para Mac
Visual Studio Code

Entre los escenarios disponibles se incluyen los siguientes:

Establecimiento y eliminación de puntos de interrupción.
Ejecute la aplicación con compatibilidad de depuración en IDE.
Examine el código en un solo paso.
Reanude la ejecución de código con un método abreviado de teclado en IDE.
En la ventana Variables locales, observe los valores de las variables locales.
Vea la pila de llamadas, incluidas las cadenas de llamadas entre JavaScript y .NET.

Por ahora, no puede:

Interrumpir las operaciones ante excepciones no controladas.
Alcanzar puntos de interrupción durante el inicio de la aplicación antes de que se ejecute el proxy de depuración. Esto incluye los puntos de interrupción de Program.cs y los de los métodos de ciclo de vida OnInitialized{Async} de los componentes que se cargan en la primera página solicitada por la aplicación.
Depure en escenarios no locales; por ejemplo, el Subsistema de Windows para Linux (WSL) o Visual Studio Codespaces.
Recompile automáticamente la aplicación *Server* de back-end de una solución Blazor WebAssembly hospedada durante la depuración, por ejemplo, mediante la ejecución de la aplicación con dotnet watch run.

Requisitos previos

La depuración requiere cualquiera de los exploradores siguientes:

Google Chrome (versión 70 o posterior) (predeterminado)
Microsoft Edge (versión 80 o posterior)

Asegúrese de que los firewalls o servidores proxy no bloquean la comunicación con el proxy de depuración (proceso NodeJS). Para más información, vea la sección Configuración de firewall.

Los usuarios de Visual Studio Code requieren las siguientes extensiones:

Extensión de C# para Visual Studio Code
Extensión de depuración WASM de Blazor (al usar la versión 1.23.9 de la extensión de C# para Visual Studio Code u otra posterior)

Visual Studio para Mac requiere la versión 8.8 (compilación 1532) o una posterior:

Instale la versión más reciente de Visual Studio para Mac seleccionando el botón Descargar Visual Studio para Mac en Microsoft: Visual Studio para Mac.
Seleccione el canal Vista preliminar en Visual Studio. Para obtener más información, vea Instalación de la versión más reciente de Visual Studio para Mac.

Nota

Apple Safari en macOS no se admite actualmente.

Depuración de una aplicación Blazor WebAssembly independiente

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

Una vez que lo actualice, el archivo launchSettings.json debe ser similar a este ejemplo:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "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"
        }
      }
    }
  }

La propiedad inspectUri:

Permite que el IDE detecte que la aplicación es una aplicación Blazor WebAssembly.
Indica a la infraestructura de depuración de scripts que se conecte al explorador a través del proxy de depuración de Blazor.

Para depurar una aplicación Blazor WebAssembly en Visual Studio:

Cree una nueva solución de Blazor WebAssembly hospedada.
Con el proyecto Server seleccionado en el Explorador de soluciones, presione F5 para ejecutar la aplicación en el depurador.
Nota

Al realizar una depuración con un explorador basado en Chromium, como Google Chrome o Microsoft Edge, puede que se abra una nueva ventana del navegador con un perfil distinto para la sesión de depuración, en vez de abrir una pestaña en una ventana existente con el perfil del usuario. Si la depuración con el perfil del usuario es un requisito, adopte uno de estos enfoques:
- Cierre todas las instancias abiertas del navegador antes de presionar F5 para iniciar la depuración.
- Configure Visual Studio para iniciar el explorador con el perfil del usuario. Para obtener más información sobre este enfoque, vea La depuración de WASM para Blazor en Visual Studio inicia Edge con otro directorio de datos del usuario (dotnet/aspnetcore #20915).
Nota

No admite Iniciar sin depuración (Ctrl+F5). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción.
En Visual Studio, revise el valor del campo currentCount en la ventana Variables locales.
Presione F5 para continuar la ejecución.

Al depurar una aplicación de Blazor WebAssembly, también puede depurar el código del servidor:

Establezca un punto de interrupción en la página Pages/FetchData.razor de OnInitializedAsync.
Establezca un punto de interrupción en WeatherForecastController en el método de acción Get.
Vaya a la página Fetch Data para alcanzar el primer punto de interrupción en el componente FetchData justo antes de que emita una solicitud HTTP al servidor.
Presione F5 para continuar la ejecución y, luego, alcance el punto de interrupción en el servidor en WeatherForecastController.
Vuelva a presionar F5 para permitir que la ejecución continúe y ver la tabla de pronóstico meteorológico representada en el explorador.

Nota

applicationUrl:

"iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

inspectUri de cada perfil:

"profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Los marcadores de posición en la configuración anterior:

{INSECURE PORT}: puerto no seguro. De forma predeterminada, se proporciona un valor aleatorio, pero también se permite un puerto personalizado.
{APP BASE PATH}: ruta de acceso base de la aplicación.
{SECURE PORT}: puerto seguro. De forma predeterminada, se proporciona un valor aleatorio, pero también se permite un puerto personalizado.
{PROFILE 1, 2, ... N}: perfiles de configuración de inicio. Normalmente, una aplicación especifica más de un perfil de forma predeterminada (por ejemplo, un perfil para IIS Express y un perfil de proyecto, que se usa en el servidor de Kestrel).

En los ejemplos siguientes, la aplicación se hospeda en /OAT con una ruta de acceso base de la aplicación configurada en wwwroot/index.html como <base href="/OAT/">:

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/OAT/_framework/debug/ws-proxy?browser={browserInspectUri}",

Para obtener información sobre el uso de una ruta de acceso base de la aplicación personalizada para las aplicaciones de Blazor WebAssembly, vea Hospedaje e implementación de ASP.NET Core Blazor.

Depuración de una aplicación independiente Blazor WebAssembly

Para obtener información sobre cómo configurar recursos de VS Code en la carpeta .vscode, consulte la guía del sistema operativo Linux en Herramientas para ASP.NET Core Blazor.

Abra la aplicación independiente Blazor WebAssembly en VS Code.

Puede recibir una notificación que indica que se requiere más información para habilitar la depuración:

Se necesita una configuración adicional para depurar aplicaciones Blazor WebAssembly.

Si recibe la notificación:
- Confirme que está instalada la extensión de C# para Visual Studio Code más reciente. Para inspeccionar las extensiones instaladas, abra Ver > Extensiones en la barra de menús o seleccione el icono Extensiones en la barra lateral Actividad.
- Al usar la versión 1.23.9 u otra posterior de la extensión de C# para Visual Studio Code, confirme que está instalada la extensión de depuración WASM de Blazor más reciente. Para inspeccionar las extensiones instaladas, abra Ver > Extensiones en la barra de menús o seleccione el icono Extensiones en la barra lateral Actividad.
- Confirme que está habilitada la depuración de JavaScript en versión preliminar. Abra la configuración en la barra de menús (Archivo > Preferencias > Configuración). Busque con las palabras clave debug preview. En los resultados de la búsqueda, establezca o confirme que la casilla Debug > JavaScript: Use Preview (Depurar > JavaScript: Usar versión preliminar) está activada. Si la opción para habilitar la depuración de vista previa no está presente, actualice a la versión más reciente de VS Code o instale la extensión del depurador de JavaScript (VS Code 1.46 o versiones anteriores).
- Recargue la ventana.
Para iniciar la depuración, use el método abreviado de teclado F5 o el elemento de menú.

Nota

No admite Iniciar sin depuración (Ctrl+F5). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.
Cuando se le pida, seleccione la opción Blazor WebAssembly Debug (Depuración de Blazor WebAssembly) para iniciar la depuración.
Se inicia la aplicación independiente y se abre un explorador de depuración.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción.

Nota

Depuración de una aplicación hospedada Blazor WebAssembly

El archivo .vscode/launch.json establece el directorio de trabajo actual en la carpeta del proyecto Server , normalmente Server para una solución de Blazor WebAssembly hospedada:

"cwd": "${workspaceFolder}/Server"

Si se usa Microsoft Edge para la depuración en lugar de Google Chrome, la configuración de inicio .vscode/launch.json establece la propiedad browser:

"browser": "edge"

El archivo .vscode/tasks.json agrega la ruta de acceso del archivo del proyecto de la aplicación Server a los argumentos dotnet build en args. La carpeta del proyecto Server se llama normalmente Server en una solución basada en la plantilla del proyecto de Blazor WebAssembly hospedado. En el ejemplo siguiente se usa el archivo del proyecto para la aplicación Server del tutorial Blazor-SignalR, que tiene un archivo del proyecto denominado BlazorWebAssemblySignalRApp.Server.csproj:

{
    ...
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "shell",
            "args": [
                ...
                "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
                ...
            ],
            ...
        }
    ]
}

El archivo Properties/launchSettings.json del proyecto Server incluye la propiedad inspectUri para el proxy de depuración. En el ejemplo siguiente se asigna un nombre al perfil de inicio para la aplicación Server del tutorial Blazor-SignalR, que es BlazorWebAssemblySignalRApp.Server:

{
  "iisSettings": {
    ...
  },
  "profiles": {
    "IIS Express": {
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      ...
    },
    "BlazorWebAssemblySignalRApp.Server": {
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      ...
    }
  }
}

Adjuntar a una sesión de depuración existente

Para adjuntar a una aplicación Blazor en ejecución, cree un archivo launch.json con la configuración siguiente:

{
  "type": "blazorwasm",
  "request": "attach",
  "name": "Attach to Existing Blazor WebAssembly Application"
}

Nota

Solo se permite adjuntar a una sesión de depuración en el caso de las aplicaciones independientes. Para usar la depuración de pila completa, debe iniciar la aplicación desde VS Code.

Opciones de configuración de inicio

Estas opciones de configuración de inicio son compatibles con el tipo de depuración blazorwasm (.vscode/launch.json).

Opción	Descripción
`request`	Use `launch` para iniciar y adjuntar una sesión de depuración a una aplicación Blazor WebAssembly o `attach` para adjuntar una sesión de depuración a una aplicación que ya está en ejecución.
`url`	La dirección URL que se va a abrir en el explorador durante la depuración. Tiene como valor predeterminado `https://localhost:5001`.
`browser`	El explorador que se va a iniciar para la sesión de depuración. Se establece en `edge` o `chrome`. Tiene como valor predeterminado `chrome`.
`trace`	Se usa para generar registros desde el depurador de JS. Se establece en `true` para generar registros.
`hosted`	Se debe establecer en `true` si se inicia y depura una aplicación hospedada Blazor WebAssembly.
`webRoot`	Especifica la ruta de acceso absoluta del servidor web. Se debe establecer si una aplicación se envía desde una subruta.
`timeout`	El número de milisegundos que se esperarán para adjuntar la sesión de depuración. El valor predeterminado es 30 000 milisegundos (30 segundos).
`program`	Una referencia al archivo ejecutable para ejecutar el servidor de la aplicación hospedada. Se debe establecer si `hosted` es `true`.
`cwd`	El directorio de trabajo en el que se va a iniciar la aplicación. Se debe establecer si `hosted` es `true`.
`env`	Las variables de entorno que se van a proporcionar al proceso iniciado. Solo se aplica si `hosted` está establecido en `true`.

Configuraciones de inicio de ejemplo

Inicio y depuración de una aplicación independiente Blazor WebAssembly

{
  "type": "blazorwasm",
  "request": "launch",
  "name": "Launch and Debug"
}

Adjuntar a una aplicación en ejecución en una dirección URL especificada

{
  "type": "blazorwasm",
  "request": "attach",
  "name": "Attach and Debug",
  "url": "http://localhost:5000"
}

Para depurar una aplicación Blazor WebAssembly en Visual Studio para Mac, haga lo siguiente:

Cree una aplicación hospedada Blazor WebAssembly de ASP.NET Core.
Presione ⌘+↩ para ejecutar la aplicación en el depurador.

Nota

No se admite la opción Iniciar sin depurar (⌥+⌘+↩). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.

Importante

El explorador seleccionado para la sesión de depuración debe ser Google Chrome o Microsoft Edge.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción:
En Visual Studio, revise el valor del campo currentCount en la ventana Variables locales.
Presione ⌘+↩ para continuar la ejecución.

Al depurar una aplicación de Blazor WebAssembly, también puede depurar el código del servidor:

Establezca un punto de interrupción en la página Pages/FetchData.razor de OnInitializedAsync.
Establezca un punto de interrupción en WeatherForecastController en el método de acción Get.
Vaya a la página Fetch Data para alcanzar el primer punto de interrupción en el componente FetchData justo antes de que emita una solicitud HTTP al servidor.
Presione ⌘+↩ para continuar la ejecución y, luego, alcance el punto de interrupción en el servidor en WeatherForecastController.
Vuelva a presionar ⌘+↩ para permitir que la ejecución continúe y ver la tabla de pronóstico meteorológico representada en el explorador.

Nota

Para obtener más información, vea Depuración con Visual Studio para Mac.

Depuración en el explorador

La guía de esta sección se aplica a Google Chrome y Microsoft Edge en Windows.

Ejecute una compilación de depuración de la aplicación en el entorno de desarrollo.
Inicie un explorador y vaya a la dirección URL de la aplicación (por ejemplo, https://localhost:5001).
En el explorador, intente iniciar la depuración remota; para ello, presione Mayús+Alt+D.

El explorador debe ejecutarse con la depuración remota habilitada, lo cual no es el valor predeterminado. Si la depuración remota está deshabilitada, aparece una página de error que informa de que no se puede encontrar la pestaña del explorador depurable con instrucciones para iniciar el explorador con el puerto de depuración abierto. Siga las instrucciones del explorador, que abre una nueva ventana del explorador. Cierre la ventana anterior del explorador.

Una vez que el explorador se ejecute con la depuración remota habilitada, el método abreviado de teclado de depuración del paso anterior abre una nueva pestaña del depurador.
Tras unos instantes, en la pestaña Orígenes se mostrará una lista de los ensamblados .NET de la aplicación en el nodo file://.
En el código de componente (archivos .razor) y los archivos de código de C# (.cs), se alcanzan los puntos de interrupción establecidos cuando se ejecuta el código. Una vez que se haya alcanzado un punto de interrupción, examine el código una vez (F10) o reanude (F8) la ejecución del código con normalidad.

Mapas de origen del explorador

Configuración de firewall

Si un firewall bloquea la comunicación con el proxy de depuración, cree una regla de excepción de firewall que permita la comunicación entre el explorador y el proceso NodeJS.

Advertencia

Permitir la comunicación abierta con el proceso NodeJS:

Abre el servidor de Node en cualquier conexión, en función de la configuración y las funcionalidades del firewall.
Podría ser arriesgado en función de la red.
Solo se recomienda en los equipos de los desarrolladores.

Si es posible, permita solo la comunicación abierta con el proceso NodeJS en redes privadas o de confianza.

Solucionar problemas

Si se encuentra con errores, las sugerencias siguientes pueden ser útiles:

En la pestaña Depurador, abra las herramientas para desarrolladores en el explorador. En la consola, ejecute localStorage.clear() para quitar los puntos de interrupción.
Confirme que instaló el certificado de desarrollo HTTPS de ASP.NET Core y que es de confianza. Para obtener más información, vea Aplicación de HTTPS en ASP.NET Core.
Visual Studio requiere la opción Habilitar depuración de JavaScript para ASP.NET (IE, Edge y Chrome) , en Herramientas > Opciones > Depuración > General. Es el valor predeterminado para Visual Studio. Si la depuración no funciona, confirme que la opción está seleccionada.
Si su entorno usa un proxy HTTP, asegúrese de que localhost esté incluido en la configuración de omisión del proxy. Esto puede hacerse al establecer la variable de entorno NO_PROXY en alguna de las siguientes opciones:
- Archivo launchSettings.json del proyecto.
- En el nivel de usuario o de entorno del sistema para que se aplique a todas las aplicaciones. Si usa una variable de entorno, reinicie Visual Studio para que el cambio surta efecto.
Asegúrese de que los firewalls o servidores proxy no bloquean la comunicación con el proxy de depuración (proceso NodeJS). Para más información, vea la sección Configuración de firewall.

Puntos de interrupción de `OnInitialized{Async}` no ejecutados

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Tiempo de espera de Visual Studio (Windows)

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

El marcador de posición {TIMEOUT} del comando anterior se expresa en milisegundos. Por ejemplo, un minuto se asigna como 60000.

Visual Studio
Visual Studio para Mac
Visual Studio Code

Entre los escenarios disponibles se incluyen los siguientes:

Establecimiento y eliminación de puntos de interrupción.
Ejecute la aplicación con compatibilidad de depuración en IDE.
Examine el código en un solo paso.
Reanude la ejecución de código con un método abreviado de teclado en IDE.
En la ventana Variables locales, observe los valores de las variables locales.
Vea la pila de llamadas, incluidas las cadenas de llamadas entre JavaScript y .NET.

Por ahora, no puede:

Interrumpir las operaciones ante excepciones no controladas.
Alcanzar puntos de interrupción durante el inicio de la aplicación antes de que se ejecute el proxy de depuración. Esto incluye los puntos de interrupción de Program.cs y los de los métodos de ciclo de vida OnInitialized{Async} de los componentes que se cargan en la primera página solicitada por la aplicación.
Depure en escenarios no locales; por ejemplo, el Subsistema de Windows para Linux (WSL) o Visual Studio Codespaces.
Recompile automáticamente la aplicación *Server* de back-end de una solución Blazor WebAssembly hospedada durante la depuración, por ejemplo, mediante la ejecución de la aplicación con dotnet watch run.

Requisitos previos

La depuración requiere cualquiera de los exploradores siguientes:

Google Chrome (versión 70 o posterior) (predeterminado)
Microsoft Edge (versión 80 o posterior)

Asegúrese de que los firewalls o servidores proxy no bloquean la comunicación con el proxy de depuración (proceso NodeJS). Para más información, vea la sección Configuración de firewall.

Los usuarios de Visual Studio Code requieren las siguientes extensiones:

Extensión de C# para Visual Studio Code
Extensión de depuración WASM de Blazor (al usar la versión 1.23.9 de la extensión de C# para Visual Studio Code u otra posterior)

Visual Studio para Mac requiere la versión 8.8 (compilación 1532) o una posterior:

Instale la versión más reciente de Visual Studio para Mac seleccionando el botón Descargar Visual Studio para Mac en Microsoft: Visual Studio para Mac.
Seleccione el canal Vista preliminar en Visual Studio. Para obtener más información, vea Instalación de la versión más reciente de Visual Studio para Mac.

Nota

Apple Safari en macOS no se admite actualmente.

Depuración de una aplicación Blazor WebAssembly independiente

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

Una vez que lo actualice, el archivo launchSettings.json debe ser similar a este ejemplo:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "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"
        }
      }
    }
  }

La propiedad inspectUri:

Permite que el IDE detecte que la aplicación es una aplicación Blazor WebAssembly.
Indica a la infraestructura de depuración de scripts que se conecte al explorador a través del proxy de depuración de Blazor.

Para depurar una aplicación Blazor WebAssembly en Visual Studio:

Cree una nueva solución de Blazor WebAssembly hospedada.
Con el proyecto Server seleccionado en el Explorador de soluciones, presione F5 para ejecutar la aplicación en el depurador.
Nota

Al realizar una depuración con un explorador basado en Chromium, como Google Chrome o Microsoft Edge, puede que se abra una nueva ventana del navegador con un perfil distinto para la sesión de depuración, en vez de abrir una pestaña en una ventana existente con el perfil del usuario. Si la depuración con el perfil del usuario es un requisito, adopte uno de estos enfoques:
- Cierre todas las instancias abiertas del navegador antes de presionar F5 para iniciar la depuración.
- Configure Visual Studio para iniciar el explorador con el perfil del usuario. Para obtener más información sobre este enfoque, vea La depuración de WASM para Blazor en Visual Studio inicia Edge con otro directorio de datos del usuario (dotnet/aspnetcore #20915).
Nota

No admite Iniciar sin depuración (Ctrl+F5). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción.
En Visual Studio, revise el valor del campo currentCount en la ventana Variables locales.
Presione F5 para continuar la ejecución.

Al depurar una aplicación de Blazor WebAssembly, también puede depurar el código del servidor:

Establezca un punto de interrupción en la página Pages/FetchData.razor de OnInitializedAsync.
Establezca un punto de interrupción en WeatherForecastController en el método de acción Get.
Vaya a la página Fetch Data para alcanzar el primer punto de interrupción en el componente FetchData justo antes de que emita una solicitud HTTP al servidor.
Presione F5 para continuar la ejecución y, luego, alcance el punto de interrupción en el servidor en WeatherForecastController.
Vuelva a presionar F5 para permitir que la ejecución continúe y ver la tabla de pronóstico meteorológico representada en el explorador.

Nota

applicationUrl:

"iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

inspectUri de cada perfil:

"profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Los marcadores de posición en la configuración anterior:

{INSECURE PORT}: puerto no seguro. De forma predeterminada, se proporciona un valor aleatorio, pero también se permite un puerto personalizado.
{APP BASE PATH}: ruta de acceso base de la aplicación.
{SECURE PORT}: puerto seguro. De forma predeterminada, se proporciona un valor aleatorio, pero también se permite un puerto personalizado.
{PROFILE 1, 2, ... N}: perfiles de configuración de inicio. Normalmente, una aplicación especifica más de un perfil de forma predeterminada (por ejemplo, un perfil para IIS Express y un perfil de proyecto, que se usa en el servidor de Kestrel).

En los ejemplos siguientes, la aplicación se hospeda en /OAT con una ruta de acceso base de la aplicación configurada en wwwroot/index.html como <base href="/OAT/">:

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/OAT/_framework/debug/ws-proxy?browser={browserInspectUri}",

Para obtener información sobre el uso de una ruta de acceso base de la aplicación personalizada para las aplicaciones de Blazor WebAssembly, vea Hospedaje e implementación de ASP.NET Core Blazor.

Depuración de una aplicación independiente Blazor WebAssembly

Para obtener información sobre cómo configurar recursos de VS Code en la carpeta .vscode, consulte la guía del sistema operativo Linux en Herramientas para ASP.NET Core Blazor.

Abra la aplicación independiente Blazor WebAssembly en VS Code.

Puede recibir una notificación que indica que se requiere más información para habilitar la depuración:

Se necesita una configuración adicional para depurar aplicaciones Blazor WebAssembly.

Si recibe la notificación:
- Confirme que está instalada la extensión de C# para Visual Studio Code más reciente. Para inspeccionar las extensiones instaladas, abra Ver > Extensiones en la barra de menús o seleccione el icono Extensiones en la barra lateral Actividad.
- Al usar la versión 1.23.9 u otra posterior de la extensión de C# para Visual Studio Code, confirme que está instalada la extensión de depuración WASM de Blazor más reciente. Para inspeccionar las extensiones instaladas, abra Ver > Extensiones en la barra de menús o seleccione el icono Extensiones en la barra lateral Actividad.
- Confirme que está habilitada la depuración de JavaScript en versión preliminar. Abra la configuración en la barra de menús (Archivo > Preferencias > Configuración). Busque con las palabras clave debug preview. En los resultados de la búsqueda, establezca o confirme que la casilla Debug > JavaScript: Use Preview (Depurar > JavaScript: Usar versión preliminar) está activada. Si la opción para habilitar la depuración de vista previa no está presente, actualice a la versión más reciente de VS Code o instale la extensión del depurador de JavaScript (VS Code 1.46 o versiones anteriores).
- Recargue la ventana.
Para iniciar la depuración, use el método abreviado de teclado F5 o el elemento de menú.

Nota

No admite Iniciar sin depuración (Ctrl+F5). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.
Cuando se le pida, seleccione la opción Blazor WebAssembly Debug (Depuración de Blazor WebAssembly) para iniciar la depuración.
Se inicia la aplicación independiente y se abre un explorador de depuración.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción.

Nota

Depuración de una aplicación hospedada Blazor WebAssembly

El archivo .vscode/launch.json establece el directorio de trabajo actual en la carpeta del proyecto Server , normalmente Server para una solución de Blazor WebAssembly hospedada:

"cwd": "${workspaceFolder}/Server"

Si se usa Microsoft Edge para la depuración en lugar de Google Chrome, la configuración de inicio .vscode/launch.json establece la propiedad browser:

"browser": "edge"

{
    ...
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "shell",
            "args": [
                ...
                "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
                ...
            ],
            ...
        }
    ]
}

{
  "iisSettings": {
    ...
  },
  "profiles": {
    "IIS Express": {
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      ...
    },
    "BlazorWebAssemblySignalRApp.Server": {
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      ...
    }
  }
}

Adjuntar a una sesión de depuración existente

Para adjuntar a una aplicación Blazor en ejecución, cree un archivo launch.json con la configuración siguiente:

{
  "type": "blazorwasm",
  "request": "attach",
  "name": "Attach to Existing Blazor WebAssembly Application"
}

Nota

Solo se permite adjuntar a una sesión de depuración en el caso de las aplicaciones independientes. Para usar la depuración de pila completa, debe iniciar la aplicación desde VS Code.

Opciones de configuración de inicio

Estas opciones de configuración de inicio son compatibles con el tipo de depuración blazorwasm (.vscode/launch.json).

Opción	Descripción
`request`	Use `launch` para iniciar y adjuntar una sesión de depuración a una aplicación Blazor WebAssembly o `attach` para adjuntar una sesión de depuración a una aplicación que ya está en ejecución.
`url`	La dirección URL que se va a abrir en el explorador durante la depuración. Tiene como valor predeterminado `https://localhost:5001`.
`browser`	El explorador que se va a iniciar para la sesión de depuración. Se establece en `edge` o `chrome`. Tiene como valor predeterminado `chrome`.
`trace`	Se usa para generar registros desde el depurador de JS. Se establece en `true` para generar registros.
`hosted`	Se debe establecer en `true` si se inicia y depura una aplicación hospedada Blazor WebAssembly.
`webRoot`	Especifica la ruta de acceso absoluta del servidor web. Se debe establecer si una aplicación se envía desde una subruta.
`timeout`	El número de milisegundos que se esperarán para adjuntar la sesión de depuración. El valor predeterminado es 30 000 milisegundos (30 segundos).
`program`	Una referencia al archivo ejecutable para ejecutar el servidor de la aplicación hospedada. Se debe establecer si `hosted` es `true`.
`cwd`	El directorio de trabajo en el que se va a iniciar la aplicación. Se debe establecer si `hosted` es `true`.
`env`	Las variables de entorno que se van a proporcionar al proceso iniciado. Solo se aplica si `hosted` está establecido en `true`.

Configuraciones de inicio de ejemplo

Inicio y depuración de una aplicación independiente Blazor WebAssembly

{
  "type": "blazorwasm",
  "request": "launch",
  "name": "Launch and Debug"
}

Adjuntar a una aplicación en ejecución en una dirección URL especificada

{
  "type": "blazorwasm",
  "request": "attach",
  "name": "Attach and Debug",
  "url": "http://localhost:5000"
}

Para depurar una aplicación Blazor WebAssembly en Visual Studio para Mac, haga lo siguiente:

Cree una aplicación hospedada Blazor WebAssembly de ASP.NET Core.
Presione ⌘+↩ para ejecutar la aplicación en el depurador.

Nota

No se admite la opción Iniciar sin depurar (⌥+⌘+↩). Cuando la aplicación se ejecuta en la configuración de depuración, la sobrecarga de depuración siempre genera una pequeña reducción del rendimiento.

Importante

El explorador seleccionado para la sesión de depuración debe ser Google Chrome o Microsoft Edge.
En la aplicación *Client*, establezca un punto de interrupción en la línea currentCount++; en Pages/Counter.razor.
En el explorador, vaya a la página Counter y seleccione el botón Hacer clic aquí para alcanzar el punto de interrupción:
En Visual Studio, revise el valor del campo currentCount en la ventana Variables locales.
Presione ⌘+↩ para continuar la ejecución.

Al depurar una aplicación de Blazor WebAssembly, también puede depurar el código del servidor:

Establezca un punto de interrupción en la página Pages/FetchData.razor de OnInitializedAsync.
Establezca un punto de interrupción en WeatherForecastController en el método de acción Get.
Vaya a la página Fetch Data para alcanzar el primer punto de interrupción en el componente FetchData justo antes de que emita una solicitud HTTP al servidor.
Presione ⌘+↩ para continuar la ejecución y, luego, alcance el punto de interrupción en el servidor en WeatherForecastController.
Vuelva a presionar ⌘+↩ para permitir que la ejecución continúe y ver la tabla de pronóstico meteorológico representada en el explorador.

Nota

Para obtener más información, vea Depuración con Visual Studio para Mac.

Depuración en el explorador

La guía de esta sección se aplica a Google Chrome y Microsoft Edge en Windows.

Ejecute una compilación de depuración de la aplicación en el entorno de desarrollo.
Inicie un explorador y vaya a la dirección URL de la aplicación (por ejemplo, https://localhost:5001).
En el explorador, intente iniciar la depuración remota; para ello, presione Mayús+Alt+D.

El explorador debe ejecutarse con la depuración remota habilitada, lo cual no es el valor predeterminado. Si la depuración remota está deshabilitada, aparece una página de error que informa de que no se puede encontrar la pestaña del explorador depurable con instrucciones para iniciar el explorador con el puerto de depuración abierto. Siga las instrucciones del explorador, que abre una nueva ventana del explorador. Cierre la ventana anterior del explorador.

Una vez que el explorador se ejecute con la depuración remota habilitada, el método abreviado de teclado de depuración del paso anterior abre una nueva pestaña del depurador.
Tras unos instantes, en la pestaña Orígenes se mostrará una lista de los ensamblados .NET de la aplicación en el nodo file://.
En el código de componente (archivos .razor) y los archivos de código de C# (.cs), se alcanzan los puntos de interrupción establecidos cuando se ejecuta el código. Una vez que se haya alcanzado un punto de interrupción, examine el código una vez (F10) o reanude (F8) la ejecución del código con normalidad.

Mapas de origen del explorador

Configuración de firewall

Si un firewall bloquea la comunicación con el proxy de depuración, cree una regla de excepción de firewall que permita la comunicación entre el explorador y el proceso NodeJS.

Advertencia

Permitir la comunicación abierta con el proceso NodeJS:

Abre el servidor de Node en cualquier conexión, en función de la configuración y las funcionalidades del firewall.
Podría ser arriesgado en función de la red.
Solo se recomienda en los equipos de los desarrolladores.

Si es posible, permita solo la comunicación abierta con el proceso NodeJS en redes privadas o de confianza.

Solucionar problemas

Si se encuentra con errores, las sugerencias siguientes pueden ser útiles:

En la pestaña Depurador, abra las herramientas para desarrolladores en el explorador. En la consola, ejecute localStorage.clear() para quitar los puntos de interrupción.
Confirme que instaló el certificado de desarrollo HTTPS de ASP.NET Core y que es de confianza. Para obtener más información, vea Aplicación de HTTPS en ASP.NET Core.
Visual Studio requiere la opción Habilitar depuración de JavaScript para ASP.NET (IE, Edge y Chrome) , en Herramientas > Opciones > Depuración > General. Es el valor predeterminado para Visual Studio. Si la depuración no funciona, confirme que la opción está seleccionada.
Si su entorno usa un proxy HTTP, asegúrese de que localhost esté incluido en la configuración de omisión del proxy. Esto puede hacerse al establecer la variable de entorno NO_PROXY en alguna de las siguientes opciones:
- Archivo launchSettings.json del proyecto.
- En el nivel de usuario o de entorno del sistema para que se aplique a todas las aplicaciones. Si usa una variable de entorno, reinicie Visual Studio para que el cambio surta efecto.
Asegúrese de que los firewalls o servidores proxy no bloquean la comunicación con el proxy de depuración (proceso NodeJS). Para más información, vea la sección Configuración de firewall.

Puntos de interrupción de `OnInitialized{Async}` no ejecutados

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Tiempo de espera de Visual Studio (Windows)

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

El marcador de posición {TIMEOUT} del comando anterior se expresa en milisegundos. Por ejemplo, un minuto se asigna como 60000.

Depuración de Blazor WebAssembly en ASP.NET Core

Valore su experiencia

Requisitos previos

Depuración de una aplicación Blazor WebAssembly independiente

Depuración en el explorador

Mapas de origen del explorador

Configuración de firewall

Solucionar problemas

Puntos de interrupción de OnInitialized{Async} no ejecutados

Tiempo de espera de Visual Studio (Windows)

Requisitos previos

Depuración de una aplicación Blazor WebAssembly independiente

Depuración en el explorador

Mapas de origen del explorador

Configuración de firewall

Solucionar problemas

Puntos de interrupción de OnInitialized{Async} no ejecutados

Tiempo de espera de Visual Studio (Windows)

Requisitos previos

Depuración de una aplicación Blazor WebAssembly independiente

Depuración en el explorador

Mapas de origen del explorador

Configuración de firewall

Solucionar problemas

Puntos de interrupción de OnInitialized{Async} no ejecutados

Tiempo de espera de Visual Studio (Windows)

Puntos de interrupción de `OnInitialized{Async}` no ejecutados

Puntos de interrupción de `OnInitialized{Async}` no ejecutados

Puntos de interrupción de `OnInitialized{Async}` no ejecutados