Diagnósticos de las herramientas de desarrollo del navegador de ASP.NET Core Blazor WebAssembly

2025-05-22

En este artículo se describen las herramientas de diagnóstico para desarrolladores del navegador en aplicaciones Blazor WebAssembly.

Prerrequisito

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

dotnet workload install wasm-tools

Herramientas para desarrolladores del navegador

El código de la aplicación se puede perfilar manualmente utilizando el perfilador de diagnóstico en la consola de herramientas para desarrolladores de un navegador.

Las características de diagnóstico integradas están disponibles para realizar el seguimiento:

Compilación anticipada (AOT)
Especificación de llamadas ("callspec", secuencia y tiempo de llamadas a funciones) e instrumentación

Las propiedades de MSBuild de la tabla siguiente habilitan la integración del generador de perfiles.

Propiedad	Predeterminado	Establezca el valor en...	Descripción
`<WasmProfilers>`	Sin valor	`browser`	Perfiles de Mono a utilizar. Los valores potenciales son "`browser`" y "`log`". Para usar ambos, separe los valores con punto y coma. El `browser` perfilador permite la integración con el perfilador de las herramientas de desarrollo del navegador.
`<WasmNativeStrip>`	`true`	`false`	Habilita la eliminación del archivo ejecutable nativo.
`<WasmNativeDebugSymbols>`	`true`	`true`	Habilita la compilación con símbolos de depuración nativos.

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

La habilitación de generadores de perfiles 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. En el ejemplo siguiente, se establece una condición en una sección de grupo de propiedades que solo habilita la generación de perfiles cuando la aplicación se compila con /p:BlazorSampleProfilingEnabled=true (CLI de.NET) o <BlazorSampleProfilingEnabled>true</BlazorSampleProfilingEnabled> en un perfil de publicación de Visual Studio, donde "BlazorSampleProfilingEnabled" es un nombre de símbolo personalizado que elija y no entra en conflicto con otros nombres de símbolos.

En el archivo de proyecto de la aplicación (.csproj):

<PropertyGroup Condition="'$(BlazorSampleProfilingEnabled)' == 'true'">
  <WasmProfilers>browser;</WasmProfilers>
  <WasmNativeStrip>false</WasmNativeStrip>
  <WasmNativeDebugSymbols>true</WasmNativeDebugSymbols>
</PropertyGroup>

Como alternativa, habilite las características cuando la aplicación se compila con la CLI de .NET. Las siguientes opciones pasadas al comando dotnet build reflejan la configuración de la propiedad MS Build anterior:

/p:WasmProfilers=browser /p:WasmNativeStrip=false /p:WasmNativeDebugSymbols=true

La configuración de herramientas de perfilado de WebAssembly con <WasmProfilers> no requiere compilación anticipada (AOT).

El generador de perfiles de herramientas de desarrollo del navegador se puede usar con AOT (<RunAOTCompilation>/<RunAOTCompilationAfterBuild> establecido en true) y sin los perfiles de WebAssembly (<WasmProfilers> eliminados).

Para ver los nombres de los métodos AOT en la consola de herramientas de desarrollo, instale la extensión Chrome DWARF.

Establecimiento del intervalo de ejemplo

Configure el intervalo de ejemplo en el archivo de proyecto de la aplicación. En el ejemplo siguiente, el {INTERVAL} marcador de posición representa la hora en milisegundos. La configuración predeterminada si sampleIntervalMs no se especifica es de 10 ms.

<PropertyGroup>
  <WasmProfilers>browser:interval={INTERVAL};</WasmProfilers>
</PropertyGroup>

Especificación de llamadas (callspec)

Si desea filtrar los métodos con perfiles, use la especificación de llamada (callspec).

Agregue callspec con un filtro al browser generador de perfiles de WebAssembly en el <WasmProfilers> elemento :

<WasmProfilers>browser:callspec={FILTER};</WasmProfilers>

Los valores de marcador de posición permisibles {FILTER} se muestran en la tabla siguiente.

Filtro	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 la expresión

En el ejemplo siguiente, los métodos con perfiles se filtran por el espacio de nombres SampleApp de la aplicación y el intervalo de muestreo es de 50 ms.

<WasmProfilers>browser:callspec=N:SampleApp,interval=50</WasmProfilers>