Skip to content

Commit 7319ebb

Browse files
authored
[Pre6] Better EP docs with new names (#35577)
1 parent 360d5ef commit 7319ebb

File tree

2 files changed

+96
-62
lines changed

2 files changed

+96
-62
lines changed

aspnetcore/blazor/performance/webassembly-browser-developer-tools-diagnostics.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ In the app's project file (`.csproj`):
5454
<WasmProfilers>browser;</WasmProfilers>
5555
<WasmNativeStrip>false</WasmNativeStrip>
5656
<WasmNativeDebugSymbols>true</WasmNativeDebugSymbols>
57+
<!-- disable debugger -->
58+
<WasmDebugLevel>0</WasmDebugLevel>
5759
</PropertyGroup>
5860
```
5961

aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md

Lines changed: 94 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Learn about Event Pipe diagnostics and how to get a Garbage Collect
55
monikerRange: '>= aspnetcore-10.0'
66
ms.author: wpickett
77
ms.custom: mvc
8-
ms.date: 05/02/2025
8+
ms.date: 06/04/2025
99
uid: blazor/performance/webassembly-event-pipe
1010
---
1111
# ASP.NET Core Blazor WebAssembly Event Pipe diagnostics
@@ -16,116 +16,148 @@ uid: blazor/performance/webassembly-event-pipe
1616
1717
-->
1818

19-
This article describes Event Pipe diagnostic tools, counters, and how to get a Garbage Collector heap dump in Blazor WebAssembly apps.
19+
This article describes diagnostic tools and how to use them in Blazor WebAssembly apps.
2020

21-
## Prerequisite
21+
## Prerequisite for all scenarios
2222

2323
Install the [.NET WebAssembly build tools](xref:blazor/tooling/webassembly#net-webassembly-build-tools):
2424

2525
```dotnetcli
2626
dotnet workload install wasm-tools
2727
```
2828

29-
## .NET Core Diagnostics Client Library example
29+
## How a WebAssembly app uses memory and how to troubleshoot memory leaks
3030

31-
Parse and validate NetTrace (`.nettrace`) messages using the .NET Core Diagnostics Client Library:
31+
In the app's project file (`.csproj`), add following properties for the duration of the investigation:
3232

33-
* [`dotnet/diagnostics` GitHub repository](https://github.com/dotnet/diagnostics)
34-
* [`Microsoft.Diagnostics.NETCore.Client` NuGet package](https://www.nuget.org/packages/Microsoft.Diagnostics.NETCore.Client)
33+
```xml
34+
<!-- do not enable diagnostics in production, as it has a negative performance impact -->
35+
<PropertyGroup>
36+
<EnableDiagnostics>true</EnableDiagnostics>
37+
</PropertyGroup>
38+
```
3539

36-
For more information, see the [.NET Core diagnostics documentation](/dotnet/core/diagnostics/) and the [`IpcMessage` API (reference source)](https://github.com/dotnet/diagnostics/blob/main/src/Microsoft.Diagnostics.NETCore.Client/DiagnosticsIpc/IpcMessage.cs).
40+
> [!WARNING]
41+
> Don't enable diagnostics in production because it has a negative performance impact.
3742
38-
[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)]
43+
Build your app with the `wasm-tools` workload.
3944

40-
The MSBuild properties in the following table enable profiler integration.
45+
Open the app in a browser and navigate to problematic pages or components.
4146

42-
Property | Default | Set value to&hellip; | Description
43-
--- | :---: | :---: | ---
44-
`<WasmPerfTracing>` | `false` | `true` | Enables support for WebAssembly performance tracing.
45-
`<WasmPerfInstrumentation>` | No value | See table&dagger; | Enables instrumentation necessary for the sampling profiler. The property follows the :::no-loc text="callspec"::: syntax. &dagger;For permissible values, see the following table.
46-
`<MetricsSupport>` | `false` | `true` | Enables `System.Diagnostics.Metrics` support. For more information, see the [`System.Diagnostics.Metrics` namespace](/dotnet/api/system.diagnostics.metrics).
47-
`<EventSourceSupport>` | `false`| `true` | Enables `EventPipe` support. For more information, see [Diagnostics and instrumentation: Observability and telemetry](/dotnet/core/deploying/native-aot/diagnostics#observability-and-telemetry).
47+
Take a managed memory dump by calling `collectGcDump` JavaScript API:
4848

49-
The following table describes permissable `<WasmPerfInstrumentation>` values.
49+
```javascript
50+
globalThis.getDotnetRuntime(0).collectGcDump();
51+
```
5052

51-
`<WasmPerfInstrumentation>` value | Description
52-
--- | ---
53-
`all` | All assemblies
54-
`program` | Entry point assembly
55-
`{ASSEMBLY}` | Specifies an assembly (`{ASSEMBLY}`)
56-
`M:Type:{METHOD}` | Specifies a method (`{METHOD}`)
57-
`N:{NAMESPACE}` | Specifies a namespace (`{NAMESPACE}`)
58-
`T:{TYPE}` | Specifies a type (`{TYPE}`)
59-
`+EXPR` | Includes expression
60-
`-EXPR` | Excludes expression
53+
Call the preceding API from either a browser devoloper tools console or JavaScript code of the app.
54+
55+
A `.nettrace` file is downloaded from the browser into a local folder.
56+
57+
Convert the dump to `.gcdump` format using the `dotnet-gcdump` tool. To view the converted `.gcdump` file, use Visual Studio or PrefView.
58+
59+
For more information, see [View the GC dump captured from dotnet-gcdump](/dotnet/core/diagnostics/dotnet-gcdump#view-the-gc-dump-captured-from-dotnet-gcdump).
6160

62-
Enabling profilers has negative size and performance impacts, 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.
61+
## How a WebAssembly app uses CPU and how to find slow or hot methods
6362

64-
In the app's project file (`.csproj`):
63+
In the app's project file (`.csproj`), add following properties for the duration of the investigation:
6564

6665
```xml
67-
<PropertyGroup Condition="'$(BlazorSampleProfilingEnabled)' == 'true'">
68-
<WasmPerfTracing>true</WasmPerfTracing>
69-
<MetricsSupport>true</MetricsSupport>
70-
<EventSourceSupport>true</EventSourceSupport>
66+
<!-- do not enable diagnostics in production, as it has a negative performance impact -->
67+
<PropertyGroup>
68+
<EnableDiagnostics>true</EnableDiagnostics>
69+
<!-- disable debugger -->
70+
<WasmDebugLevel>0</WasmDebugLevel>
71+
<!-- sampling in all methods, see below for filtering options -->
72+
<WasmPerformanceInstrumentation>all</WasmPerformanceInstrumentation>
7173
</PropertyGroup>
7274
```
7375

74-
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:
76+
> [!WARNING]
77+
> Don't enable diagnostics in production because it has a negative performance impact.
7578
76-
```dotnetcli
77-
/p:WasmPerfTracing=true /p:WasmPerfInstrumentation=all /p:MetricsSupport=true /p:EventSourceSupport=true
79+
Build the app with the `wasm-tools` workload.
80+
81+
Open the app in a browser and navigate to problematic pages or components.
82+
83+
Start colllecting CPU samples for 60 seconds by calling the `collectCpuSamples` JavaScript API:
84+
85+
```javascript
86+
globalThis.getDotnetRuntime(0).collectCpuSamples({durationSeconds: 60});
7887
```
7988

80-
The [`Timing-Allow-Origin` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin) allows for more precise time measurements.
89+
Call the preceding API from either a browser devoloper tools console or JavaScript code of the app.
8190

82-
## EventPipe profiler
91+
Start using the app to run problematic code.
8392

84-
[EventPipe](/dotnet/core/diagnostics/eventpipe) is a runtime component used to collect tracing data, similar to [ETW](/windows/win32/etw/event-tracing-portal) and [perf_events](https://wikipedia.org/wiki/Perf_%28Linux%29).
93+
After the predefined period, the browser downloads a `.nettrace` file into a local folder. To view the `.nettrace` file, use Visual Studio or PrefView.
8594

86-
Use the `<WasmPerfInstrumentation>` property to enable CPU sampling instrumentation for diagnostic server. This setting isn't necessary for memory dump or counters. **Makes the app execute slower. Only enable this for performance profiling.**
95+
For more information, see [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application).
8796

88-
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.
97+
The [`Timing-Allow-Origin` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin) allows for more precise time measurements.
8998

90-
```xml
91-
<PropertyGroup Condition="'$(BlazorSampleProfilingEnabled)' == 'true'">
92-
<WasmPerfInstrumentation>all</WasmPerfInstrumentation>
93-
</PropertyGroup>
94-
```
99+
## How to observe metrics emmited by a WebAssembly app
95100

96-
Collect CPU counters for 60 seconds with `collectCpuSamples(durationSeconds)`:
101+
In the app's project file (`.csproj`), add following properties for the duration of the investigation:
97102

98-
```javascript
99-
globalThis.getDotnetRuntime(0).collectCpuSamples({durationSeconds: 60});
103+
```xml
104+
<!-- do not enable diagnostics in production, as it has a negative performance impact -->
105+
<PropertyGroup>
106+
<EnableDiagnostics>true</EnableDiagnostics>
107+
<MetricsSupport>true</MetricsSupport>
108+
<EventSourceSupport>true</EventSourceSupport>
109+
</PropertyGroup>
100110
```
101111

102-
To view the trace, see [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application).
112+
> [!WARNING]
113+
> Don't enable diagnostics in production because it has a negative performance impact.
103114
104-
## GC (Garbage Collector) dumps
115+
Build the app with the `wasm-tools` workload.
105116

106-
The [`dotnet-gcdump` (`collect`/convert` options)](/dotnet/core/diagnostics/dotnet-gcdump) global tool collects GC (Garbage Collector) dumps of live .NET processes using [EventPipe](/dotnet/core/diagnostics/eventpipe).
117+
Open the app in a browser and navigate to problematic pages or components.
107118

108-
Collect a GC (Garbage Collector) dump of the live .NET process with `collectGcDump`:
119+
Start colllecting metrics for 60 seconds by calling the `collectMetrics` JavaScript API:
109120

110121
```javascript
111-
globalThis.getDotnetRuntime(0).collectGcDump();
122+
globalThis.getDotnetRuntime(0).collectMetrics({durationSeconds: 60});
112123
```
113124

114-
To view the captured GC dump, see [View the GC dump captured from dotnet-gcdump](/dotnet/core/diagnostics/dotnet-gcdump#view-the-gc-dump-captured-from-dotnet-gcdump).
125+
Call the preceding API from either a browser devoloper tools console or JavaScript code of the app.
115126

116-
## Counters trace
127+
After the predefined period, the browser downloads a `.nettrace` file into a local folder. To view the `.nettrace` file, use Visual Studio or PrefView.
117128

118-
[`dotnet-counters collect`](/dotnet/core/diagnostics/dotnet-counters) is a performance monitoring tool for ad-hoc health monitoring and first-level performance investigation.
129+
For more information, see [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application).
119130

120-
Collect diagnostic counters for 60 seconds with `collectPerfCounters(durationSeconds)`:
131+
## MSBuild properties that enable diagnostic integration
121132

122-
```javascript
123-
globalThis.getDotnetRuntime(0).collectPerfCounters({durationSeconds: 60});
124-
```
133+
Property | Default | Set value to&hellip; | Description
134+
--- | :---: | :---: | ---
135+
`<EnableDiagnostics>` | `false` | `true` | Enables support for WebAssembly performance tracing.
136+
`<WasmPerformanceInstrumentation>` | No value | See table&dagger; | Enables instrumentation necessary for the sampling profiler. The property follows the :::no-loc text="callspec"::: syntax. &dagger;For permissible values, see the following table.
137+
`<MetricsSupport>` | `false` | `true` | Enables `System.Diagnostics.Metrics` support. For more information, see the [`System.Diagnostics.Metrics` namespace](/dotnet/api/system.diagnostics.metrics).
138+
`<EventSourceSupport>` | `false`| `true` | Enables `EventPipe` support. For more information, see [Diagnostics and instrumentation: Observability and telemetry](/dotnet/core/deploying/native-aot/diagnostics#observability-and-telemetry).
139+
140+
The following table describes permissable `<WasmPerformanceInstrumentation>` values.
141+
142+
`<WasmPerformanceInstrumentation>` value | Description
143+
--- | ---
144+
`all` | All assemblies
145+
`program` | Entry point assembly
146+
`{ASSEMBLY}` | Specifies an assembly (`{ASSEMBLY}`)
147+
`M:Type:{METHOD}` | Specifies a method (`{METHOD}`)
148+
`N:{NAMESPACE}` | Specifies a namespace (`{NAMESPACE}`)
149+
`T:{TYPE}` | Specifies a type (`{TYPE}`)
150+
`+EXPR` | Includes expression
151+
`-EXPR` | Excludes expression
152+
153+
Your code should yield to main browser loop often to allow the trace to be collected. When executing long running loops, the internal diagnostic buffers could overflow.
125154

126-
To view the trace, see [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application).
155+
**Enabling profilers and diagnostic tools has negative size and performance impacts, so don't publish an app for production with profilers enabled.**
127156

128157
## Additional resources
129158

159+
* [EventPipe](/dotnet/core/diagnostics/eventpipe) is a runtime component used to collect tracing data, similar to [ETW](/windows/win32/etw/event-tracing-portal) and [perf_events](https://wikipedia.org/wiki/Perf_%28Linux%29).
130160
* [What diagnostic tools are available in .NET Core?](/dotnet/core/diagnostics/)
131161
* [.NET diagnostic tools](/dotnet/core/diagnostics/tools-overview)
162+
* [`dotnet/diagnostics` GitHub repository](https://github.com/dotnet/diagnostics)
163+
* [`Microsoft.Diagnostics.NETCore.Client` NuGet package](https://www.nuget.org/packages/Microsoft.Diagnostics.NETCore.Client)

0 commit comments

Comments
 (0)