Edit

Share via


ASP.NET Core Blazor WebAssembly browser developer tools diagnostics

This article describes browser developer tools diagnostic tools in Blazor WebAssembly apps.

Prerequisite

Install the .NET WebAssembly build tools:

dotnet workload install wasm-tools

Browser developer tools

App code can be manually profiled using the diagnostic profiler in a browser's developer tools console.

Built-in diagnostic features are available to track:

The MSBuild properties in the following table enable profiler integration.

Property Default Set value to… Description
<WasmProfilers> No value browser Mono profilers to use. Potential values are "browser" and "log". To use both, separate the values with a semicolon. The browser profiler enables integration with the browser's developer tools profiler.
<WasmNativeStrip> true false Controls stripping the native executable.
<WasmNativeDebugSymbols> true true Controls building with native debug symbols.

Enabling profilers has negative size and performance impact, so don't publish an app for production with profilers enabled. In the following example, a condition is set on a property group section that only enables profiling when the app is built with /p:BlazorSampleProfilingEnabled=true (.NET CLI) or <BlazorSampleProfilingEnabled>true</BlazorSampleProfilingEnabled> in a Visual Studio publish profile, where "BlazorSampleProfilingEnabled" is a custom symbol name that you choose and doesn't conflict with other symbol names.

In the app's project file (.csproj):

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

Alternatively, enable features when the app is built with the .NET CLI. The following options passed to the dotnet build command mirror the preceding MS Build property configuration:

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

Setting WebAssembly profilers with <WasmProfilers>browser;</WasmProfilers> doesn't require AOT.

The browser developer tools profiler can be used with AOT (<RunAOTCompilation>/<RunAOTCompilationAfterBuild> set to true) and without WebAssembly profilers (<WasmProfilers>browser;</WasmProfilers> removed from the preceding property group).

To see AOT method names in the developer tools console, install DWARF chrome extension.

Set the sample interval

Configure the sample interval in the app's project file. In the following example, the {INTERVAL} placeholder represents the time in milliseconds. The default setting if sampleIntervalMs isn't specified is 10 ms.

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

Call specification (callspec)

If you want to filter profiled methods, you can use call specification (callspec). For more information, see Trace MonoVM profiler events during startup.

Add callspec to the browser WebAssembly profiler in the <WasmProfilers> element. In the following example, the {APP NAMESPACE} placeholder is the app's namespace:

<WasmProfilers>browser:callspec=N:{APP NAMESPACE};</WasmProfilers>

.NET Core Diagnostics Client Library example

In the project file (.csproj), use the <WasmProfilers> property set to browser to enable integration with the Mono profiler. Currently, only "browser" is supported. The browser profiler enables integration with the browser's developer tools profiler.

<PropertyGroup>
  <WasmProfilers>browser</WasmProfilers>
</PropertyGroup>

The Timing-Allow-Origin HTTP header allows for more precise time measurements.

Additional resources