Compartir a través de

Diagnósticos de la canalización de eventos Blazor WebAssembly de ASP.NET Core

En este artículo se describen las herramientas de diagnóstico y cómo usarlas en Blazor WebAssembly aplicaciones.

Requisito previo para todos los escenarios

Instale las herramientas de compilación de WebAssembly de .NET:

dotnet workload install wasm-tools

Cómo una aplicación WebAssembly usa memoria y cómo solucionar problemas de fugas de memoria

En el archivo de proyecto de la aplicación (.csproj), agregue las siguientes propiedades durante la investigación:

<PropertyGroup>
  <EnableDiagnostics>true</EnableDiagnostics>
</PropertyGroup>

Advertencia

No habilite los diagnósticos en producción porque tiene un impacto negativo en el rendimiento.

Construya su aplicación con la carga de trabajo wasm-tools.

Abra la aplicación en un explorador y vaya a páginas o componentes problemáticos.

Realice un volcado de memoria administrado llamando a la API de JavaScript collectGcDump:

globalThis.getDotnetRuntime(0).collectGcDump();

Llame a la API anterior desde una consola de herramientas de desarrollo del navegador o desde el código JavaScript de la aplicación.

Un .nettrace archivo se descarga desde el explorador en una carpeta local, normalmente la Downloads carpeta en Windows.

Convierta el volcado al formato .gcdump usando la herramienta dotnet-gcdump. Para ver el archivo convertido .gcdump , use Visual Studio o PrefView.

Para obtener más información, consulte Ver el volcado de memoria de GC capturado por dotnet-gcdump.

Cómo usa una aplicación WebAssembly la CPU y cómo buscar métodos lentos o activos

En el archivo de proyecto de la aplicación (.csproj), agregue las siguientes propiedades durante la investigación:

<PropertyGroup>
  <EnableDiagnostics>true</EnableDiagnostics>
  <!-- Disable debugger -->
  <WasmDebugLevel>0</WasmDebugLevel>
  <!-- Sampling in all methods, see below for filtering options -->
  <WasmPerformanceInstrumentation>all</WasmPerformanceInstrumentation>
</PropertyGroup>

Advertencia

No habilite los diagnósticos en producción porque tiene un impacto negativo en el rendimiento.

Construya la aplicación con la carga de trabajo wasm-tools.

Abra la aplicación en un explorador y vaya a páginas o componentes problemáticos.

Inicie la selección de ejemplos de CPU durante 60 segundos mediante una llamada a la collectCpuSamples API de JavaScript:

globalThis.getDotnetRuntime(0).collectCpuSamples({durationSeconds: 60});

Llame a la API anterior desde una consola de herramientas de desarrollo del navegador o desde el código JavaScript de la aplicación.

Empiece a usar la aplicación para ejecutar código problemático.

Después del período predefinido, el explorador descarga un .nettrace archivo en una carpeta local, normalmente la Downloads carpeta en Windows. Para ver el .nettrace archivo, use Visual Studio o PrefView.

Para más información, consulte Uso de EventPipe para realizar un seguimiento de la aplicación .NET.

El Timing-Allow-Origin encabezado HTTP permite mediciones de tiempo más precisas.

Cómo observar las métricas emitidas por una aplicación WebAssembly

En el archivo de proyecto de la aplicación (.csproj), agregue las siguientes propiedades durante la investigación:

<PropertyGroup>
  <EnableDiagnostics>true</EnableDiagnostics>
  <MetricsSupport>true</MetricsSupport>
  <EventSourceSupport>true</EventSourceSupport>
</PropertyGroup>

Advertencia

No habilite los diagnósticos en producción porque tiene un impacto negativo en el rendimiento.

Construya la aplicación con la carga de trabajo wasm-tools.

Abra la aplicación en un explorador y vaya a páginas o componentes problemáticos.

Inicie la selección de métricas durante 60 segundos mediante una llamada a la collectMetrics API de JavaScript:

globalThis.getDotnetRuntime(0).collectMetrics({durationSeconds: 60});

Llame a la API anterior desde una consola de herramientas de desarrollo del navegador o desde el código JavaScript de la aplicación.

Después del período predefinido, el explorador descarga un .nettrace archivo en una carpeta local, normalmente la Downloads carpeta en Windows. Para ver el .nettrace archivo, use Visual Studio o PrefView.

Para más información, consulte Uso de EventPipe para realizar un seguimiento de la aplicación .NET.

Propiedades de MSBuild que habilitan la integración de diagnóstico

Propiedad Predeterminado Establezca el valor en... Descripción
<EnableDiagnostics> false true Habilita la compatibilidad con el seguimiento de rendimiento de WebAssembly.
<WasmPerformanceInstrumentation> Sin valor Consulte la tabla† Habilita la instrumentación necesaria para el generador de perfiles de muestreo. La propiedad sigue la callspec sintaxis. †Para los valores permitidos, consulte la tabla siguiente.
<MetricsSupport> false true Habilita la compatibilidad con System.Diagnostics.Metrics. Para obtener más información, vea el espacio de nombres System.Diagnostics.Metrics.
<EventSourceSupport> false true Habilita la compatibilidad con EventPipe. Para obtener más información, consulte Diagnóstico e instrumentación: Observabilidad y telemetría.

En la tabla siguiente se describen los valores permisibles <WasmPerformanceInstrumentation> .

<WasmPerformanceInstrumentation> valor Descripción
all Todos los ensamblados
program Ensamblado de punto de entrada
{ASSEMBLY} Especifica un ensamblado ({ASSEMBLY})
M:Type:{METHOD} Especifica un método ({METHOD})
N:{NAMESPACE} Especifica un espacio de nombres ({NAMESPACE})
T:{TYPE} Especifica un tipo ({TYPE})
+EXPR Incluye expresión
-EXPR Excluye expresión

El código debe ceder el control al bucle principal del explorador a menudo para permitir que se recopile el seguimiento. Al ejecutar bucles de ejecución prolongada, los búferes de diagnóstico internos podrían desbordarse.

Precaución

La habilitación de generadores de perfiles y herramientas de diagnóstico tiene impactos negativos en el tamaño y el rendimiento, por lo que no publique una aplicación para producción con generadores de perfiles habilitados.

Recursos adicionales

  • Last updated on