From a31210a42a68727098ab632b2fd1030bc41fd8bf Mon Sep 17 00:00:00 2001 From: Pavel Savara Date: Wed, 4 Jun 2025 19:31:20 +0200 Subject: [PATCH 1/5] better EP docs with new names --- .../webassembly-event-pipe-diagnostics.md | 143 ++++++++++-------- 1 file changed, 82 insertions(+), 61 deletions(-) diff --git a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md index 6c9e653c48a4..aac9fee52f1c 100644 --- a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md +++ b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md @@ -18,114 +18,135 @@ uid: blazor/performance/webassembly-event-pipe This article describes Event Pipe diagnostic tools, counters, and how to get a Garbage Collector heap dump in Blazor WebAssembly apps. -## Prerequisite +### Scenario : I want to understand how my WebAssembly application uses memory and troubleshoot memory leaks -Install the [.NET WebAssembly build tools](xref:blazor/tooling/webassembly#net-webassembly-build-tools): +In the app's project file (`.csproj`) add following properties for the duration of the investigation: -```dotnetcli -dotnet workload install wasm-tools +```xml + + true + true + true + ``` -## .NET Core Diagnostics Client Library example +Build your application with `wasm-tools` workload. -Parse and validate NetTrace (`.nettrace`) messages using the .NET Core Diagnostics Client Library: +Open the application in the browser and walk thru problematic pages or components. -* [`dotnet/diagnostics` GitHub repository](https://github.com/dotnet/diagnostics) -* [`Microsoft.Diagnostics.NETCore.Client` NuGet package](https://www.nuget.org/packages/Microsoft.Diagnostics.NETCore.Client) +Take managed memory dump by calling `collectGcDump` JavaScript API. -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). +```javascript +globalThis.getDotnetRuntime(0).collectGcDump(); +``` -[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] +This API could be called from browser dev tools console or could be called from JavaScript code of your application. -The MSBuild properties in the following table enable profiler integration. +This will download `.nettrace` file from the browser into local folder. -Property | Default | Set value to… | Description ---- | :---: | :---: | --- -`` | `false` | `true` | Enables support for WebAssembly performance tracing. -`` | No value | See table† | Enables instrumentation necessary for the sampling profiler. The property follows the :::no-loc text="callspec"::: syntax. †For permissible values, see the following table. -`` | `false` | `true` | Enables `System.Diagnostics.Metrics` support. For more information, see the [`System.Diagnostics.Metrics` namespace](/dotnet/api/system.diagnostics.metrics). -`` | `false`| `true` | Enables `EventPipe` support. For more information, see [Diagnostics and instrumentation: Observability and telemetry](/dotnet/core/deploying/native-aot/diagnostics#observability-and-telemetry). +Convert the dump to `.gcdump` format using `dotnet-gcdump` tool. -The following table describes permissable `` values. +To view the converted `.gcdump` file, use Visual Studio or in PrefView. -`` value | Description ---- | --- -`all` | All assemblies -`program` | Entry point assembly -`{ASSEMBLY}` | Specifies an assembly (`{ASSEMBLY}`) -`M:Type:{METHOD}` | Specifies a method (`{METHOD}`) -`N:{NAMESPACE}` | Specifies a namespace (`{NAMESPACE}`) -`T:{TYPE}` | Specifies a type (`{TYPE}`) -`+EXPR` | Includes expression -`-EXPR` | Excludes expression +See also [View the GC dump captured from dotnet-gcdump](/dotnet/core/diagnostics/dotnet-gcdump#view-the-gc-dump-captured-from-dotnet-gcdump) for more info. -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 `true` in a Visual Studio publish profile, where "`BlazorSampleProfilingEnabled`" is a custom symbol name that you choose and doesn't conflict with other symbol names. +### Scenario : I want to understand how my WebAssembly application uses CPU and find slow or hot methods -In the app's project file (`.csproj`): +In the app's project file (`.csproj`) add following properties for the duration of the investigation: ```xml - - true - true - true + + true + all ``` -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: +Build your application with `wasm-tools` workload. -```dotnetcli -/p:WasmPerfTracing=true /p:WasmPerfInstrumentation=all /p:MetricsSupport=true /p:EventSourceSupport=true +Open the application in the browser and navigate to problematic pages or components. + +Start colllecting CPU samples for 60 seconds by calling `collectCpuSamples` JavaScript API. + +```javascript +globalThis.getDotnetRuntime(0).collectCpuSamples({durationSeconds: 60}); ``` -The [`Timing-Allow-Origin` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin) allows for more precise time measurements. +This API could be called from browser dev tools console or could be called from JavaScript code of your application. -## EventPipe profiler +This will download `.nettrace` file from the browser into local folder. -[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). +To view the `.nettrace` file, use Visual Studio or in PrefView. -Use the `` 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.** +See also [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application). -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 `true` in a Visual Studio publish profile, where "`BlazorSampleProfilingEnabled`" is a custom symbol name that you choose and doesn't conflict with other symbol names. +The [`Timing-Allow-Origin` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin) allows for more precise time measurements. + +### Scenario : I want to observe metrics emmited by my WebAssembly application + +In the app's project file (`.csproj`) add following properties for the duration of the investigation: ```xml - - all + + true + true + true ``` -Collect CPU counters for 60 seconds with `collectCpuSamples(durationSeconds)`: +Build your application with `wasm-tools` workload. + +Open the application in the browser and navigate to problematic pages or components. + +Start colllecting metrics for 60 seconds by calling `collectMetrics` JavaScript API. ```javascript -globalThis.getDotnetRuntime(0).collectCpuSamples({durationSeconds: 60}); +globalThis.getDotnetRuntime(0).collectMetrics({durationSeconds: 60}); ``` -To view the trace, see [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application). +This API could be called from browser dev tools console or could be called from JavaScript code of your application. -## GC (Garbage Collector) dumps +This will download `.nettrace` file from the browser into local folder. -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). +To view the `.nettrace` file, use Visual Studio or in PrefView. -Collect a GC (Garbage Collector) dump of the live .NET process with `collectGcDump`: +See also [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application). -```javascript -globalThis.getDotnetRuntime(0).collectGcDump(); -``` +## Prerequisite for all scenarios -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). +Install the [.NET WebAssembly build tools](xref:blazor/tooling/webassembly#net-webassembly-build-tools): -## Counters trace +```dotnetcli +dotnet workload install wasm-tools +``` -[`dotnet-counters collect`](/dotnet/core/diagnostics/dotnet-counters) is a performance monitoring tool for ad-hoc health monitoring and first-level performance investigation. +## The MSBuild properties in the following table enable diagnostic integration. -Collect diagnostic counters for 60 seconds with `collectPerfCounters(durationSeconds)`: +Property | Default | Set value to… | Description +--- | :---: | :---: | --- +`` | `false` | `true` | Enables support for WebAssembly performance tracing. +`` | No value | See table† | Enables instrumentation necessary for the sampling profiler. The property follows the :::no-loc text="callspec"::: syntax. †For permissible values, see the following table. +`` | `false` | `true` | Enables `System.Diagnostics.Metrics` support. For more information, see the [`System.Diagnostics.Metrics` namespace](/dotnet/api/system.diagnostics.metrics). +`` | `false`| `true` | Enables `EventPipe` support. For more information, see [Diagnostics and instrumentation: Observability and telemetry](/dotnet/core/deploying/native-aot/diagnostics#observability-and-telemetry). -```javascript -globalThis.getDotnetRuntime(0).collectPerfCounters({durationSeconds: 60}); -``` +The following table describes permissable `` values. + +`` value | Description +--- | --- +`all` | All assemblies +`program` | Entry point assembly +`{ASSEMBLY}` | Specifies an assembly (`{ASSEMBLY}`) +`M:Type:{METHOD}` | Specifies a method (`{METHOD}`) +`N:{NAMESPACE}` | Specifies a namespace (`{NAMESPACE}`) +`T:{TYPE}` | Specifies a type (`{TYPE}`) +`+EXPR` | Includes expression +`-EXPR` | Excludes expression -To view the trace, see [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application). +Enabling profilers has negative size and performance impacts, so don't publish an app for production with profilers enabled. ## Additional resources +* [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). * [What diagnostic tools are available in .NET Core?](/dotnet/core/diagnostics/) * [.NET diagnostic tools](/dotnet/core/diagnostics/tools-overview) +* [`dotnet/diagnostics` GitHub repository](https://github.com/dotnet/diagnostics) +* [`Microsoft.Diagnostics.NETCore.Client` NuGet package](https://www.nuget.org/packages/Microsoft.Diagnostics.NETCore.Client) From d2ad76825012e7fa013315170dd8ebe10be06d7d Mon Sep 17 00:00:00 2001 From: Pavel Savara Date: Wed, 4 Jun 2025 19:52:20 +0200 Subject: [PATCH 2/5] more details --- .../webassembly-event-pipe-diagnostics.md | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md index aac9fee52f1c..3f1f66866ddd 100644 --- a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md +++ b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md @@ -16,17 +16,16 @@ uid: blazor/performance/webassembly-event-pipe --> -This article describes Event Pipe diagnostic tools, counters, and how to get a Garbage Collector heap dump in Blazor WebAssembly apps. +This article describes diagnostic tools and how to use them in Blazor WebAssembly apps. -### Scenario : I want to understand how my WebAssembly application uses memory and troubleshoot memory leaks +## Scenario : I want to understand how my WebAssembly application uses memory and troubleshoot memory leaks In the app's project file (`.csproj`) add following properties for the duration of the investigation: ```xml + true - true - true ``` @@ -50,11 +49,12 @@ To view the converted `.gcdump` file, use Visual Studio or in PrefView. See also [View the GC dump captured from dotnet-gcdump](/dotnet/core/diagnostics/dotnet-gcdump#view-the-gc-dump-captured-from-dotnet-gcdump) for more info. -### Scenario : I want to understand how my WebAssembly application uses CPU and find slow or hot methods +## Scenario : I want to understand how my WebAssembly application uses CPU and find slow or hot methods In the app's project file (`.csproj`) add following properties for the duration of the investigation: ```xml + true all @@ -73,7 +73,9 @@ globalThis.getDotnetRuntime(0).collectCpuSamples({durationSeconds: 60}); This API could be called from browser dev tools console or could be called from JavaScript code of your application. -This will download `.nettrace` file from the browser into local folder. +Start using the application to run problematic code. + +After predefined time, browser will download `.nettrace` file into local folder. To view the `.nettrace` file, use Visual Studio or in PrefView. @@ -81,11 +83,12 @@ See also [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics The [`Timing-Allow-Origin` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin) allows for more precise time measurements. -### Scenario : I want to observe metrics emmited by my WebAssembly application +## Scenario : I want to observe metrics emmited by my WebAssembly application In the app's project file (`.csproj`) add following properties for the duration of the investigation: ```xml + true true @@ -105,7 +108,7 @@ globalThis.getDotnetRuntime(0).collectMetrics({durationSeconds: 60}); This API could be called from browser dev tools console or could be called from JavaScript code of your application. -This will download `.nettrace` file from the browser into local folder. +After predefined time, browser will download `.nettrace` file into local folder. To view the `.nettrace` file, use Visual Studio or in PrefView. @@ -141,7 +144,9 @@ The following table describes permissable `` val `+EXPR` | Includes expression `-EXPR` | Excludes expression -Enabling profilers has negative size and performance impacts, so don't publish an app for production with profilers enabled. +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. + +**Enabling profilers and diagnostic tools has negative size and performance impacts, so don't publish an app for production with profilers enabled.** ## Additional resources From c792c8cf95ef74e495742823d9cb05fc073dbe0c Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 4 Jun 2025 16:21:19 -0400 Subject: [PATCH 3/5] Updates --- .../webassembly-event-pipe-diagnostics.md | 91 ++++++++++--------- 1 file changed, 47 insertions(+), 44 deletions(-) diff --git a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md index 3f1f66866ddd..07f9454c317d 100644 --- a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md +++ b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md @@ -5,7 +5,7 @@ description: Learn about Event Pipe diagnostics and how to get a Garbage Collect monikerRange: '>= aspnetcore-10.0' ms.author: wpickett ms.custom: mvc -ms.date: 05/02/2025 +ms.date: 06/04/2025 uid: blazor/performance/webassembly-event-pipe --- # ASP.NET Core Blazor WebAssembly Event Pipe diagnostics @@ -18,77 +18,87 @@ uid: blazor/performance/webassembly-event-pipe This article describes diagnostic tools and how to use them in Blazor WebAssembly apps. -## Scenario : I want to understand how my WebAssembly application uses memory and troubleshoot memory leaks +## Prerequisite for all scenarios + +Install the [.NET WebAssembly build tools](xref:blazor/tooling/webassembly#net-webassembly-build-tools): + +```dotnetcli +dotnet workload install wasm-tools +``` + +## Scenario: How a WebAssembly app uses memory and how to troubleshoot memory leaks -In the app's project file (`.csproj`) add following properties for the duration of the investigation: +In the app's project file (`.csproj`), add following properties for the duration of the investigation: ```xml - + true ``` +> [!WARNING] +> Don't enable diagnostics in production because it has a negative performance impact. + Build your application with `wasm-tools` workload. -Open the application in the browser and walk thru problematic pages or components. +Open the app in a browser and navigate to problematic pages or components. -Take managed memory dump by calling `collectGcDump` JavaScript API. +Take a managed memory dump by calling `collectGcDump` JavaScript API: ```javascript globalThis.getDotnetRuntime(0).collectGcDump(); ``` -This API could be called from browser dev tools console or could be called from JavaScript code of your application. +This API could be called from a browser devoloper tools console or JavaScript code of your app. -This will download `.nettrace` file from the browser into local folder. +A `.nettrace` file is downloaded from the browser into a local folder. -Convert the dump to `.gcdump` format using `dotnet-gcdump` tool. +Convert the dump to `.gcdump` format using `dotnet-gcdump` tool. To view the converted `.gcdump` file, use Visual Studio or PrefView. -To view the converted `.gcdump` file, use Visual Studio or in PrefView. +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). -See also [View the GC dump captured from dotnet-gcdump](/dotnet/core/diagnostics/dotnet-gcdump#view-the-gc-dump-captured-from-dotnet-gcdump) for more info. +## Scenario: How a WebAssembly app uses CPU and how to find slow or hot methods -## Scenario : I want to understand how my WebAssembly application uses CPU and find slow or hot methods - -In the app's project file (`.csproj`) add following properties for the duration of the investigation: +In the app's project file (`.csproj`), add following properties for the duration of the investigation: ```xml - + true all ``` -Build your application with `wasm-tools` workload. +> [!WARNING] +> Don't enable diagnostics in production because it has a negative performance impact. + +Build the app with the `wasm-tools` workload. -Open the application in the browser and navigate to problematic pages or components. +Open the app in a browser and navigate to problematic pages or components. -Start colllecting CPU samples for 60 seconds by calling `collectCpuSamples` JavaScript API. +Start colllecting CPU samples for 60 seconds by calling the `collectCpuSamples` JavaScript API: ```javascript globalThis.getDotnetRuntime(0).collectCpuSamples({durationSeconds: 60}); ``` -This API could be called from browser dev tools console or could be called from JavaScript code of your application. +This API could be called from a browser devoloper tools console or JavaScript code of your app. -Start using the application to run problematic code. +Start using the app to run problematic code. -After predefined time, browser will download `.nettrace` file into local folder. +After the predefined period, the browser downloads a `.nettrace` file into a local folder. To view the `.nettrace` file, use Visual Studio or PrefView. -To view the `.nettrace` file, use Visual Studio or in PrefView. - -See also [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application). +For more information, see [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application). The [`Timing-Allow-Origin` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin) allows for more precise time measurements. -## Scenario : I want to observe metrics emmited by my WebAssembly application +## Scenario: How to observe metrics emmited by a WebAssembly app -In the app's project file (`.csproj`) add following properties for the duration of the investigation: +In the app's project file (`.csproj`), add following properties for the duration of the investigation: ```xml - + true true @@ -96,33 +106,26 @@ In the app's project file (`.csproj`) add following properties for the duration ``` -Build your application with `wasm-tools` workload. +> [!WARNING] +> Don't enable diagnostics in production because it has a negative performance impact. + +Build the app with the `wasm-tools` workload. -Open the application in the browser and navigate to problematic pages or components. +Open the app in a browser and navigate to problematic pages or components. -Start colllecting metrics for 60 seconds by calling `collectMetrics` JavaScript API. +Start colllecting metrics for 60 seconds by calling the `collectMetrics` JavaScript API: ```javascript globalThis.getDotnetRuntime(0).collectMetrics({durationSeconds: 60}); ``` -This API could be called from browser dev tools console or could be called from JavaScript code of your application. - -After predefined time, browser will download `.nettrace` file into local folder. - -To view the `.nettrace` file, use Visual Studio or in PrefView. - -See also [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application). +This API could be called from a browser devoloper tools console or JavaScript code of your app. -## Prerequisite for all scenarios - -Install the [.NET WebAssembly build tools](xref:blazor/tooling/webassembly#net-webassembly-build-tools): +After the predefined period, the browser downloads a `.nettrace` file into a local folder. To view the `.nettrace` file, use Visual Studio or PrefView. -```dotnetcli -dotnet workload install wasm-tools -``` +For more information, see [Use EventPipe to trace your .NET application](/dotnet/core/diagnostics/eventpipe#use-eventpipe-to-trace-your-net-application). -## The MSBuild properties in the following table enable diagnostic integration. +## MSBuild properties that enable diagnostic integration Property | Default | Set value to… | Description --- | :---: | :---: | --- From be26664e1955accdd1dbef39e4dc54f2961121ef Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 4 Jun 2025 16:27:06 -0400 Subject: [PATCH 4/5] Updates --- .../webassembly-event-pipe-diagnostics.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md index 07f9454c317d..c2e60093e999 100644 --- a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md +++ b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md @@ -26,12 +26,12 @@ Install the [.NET WebAssembly build tools](xref:blazor/tooling/webassembly#net-w dotnet workload install wasm-tools ``` -## Scenario: How a WebAssembly app uses memory and how to troubleshoot memory leaks +## How a WebAssembly app uses memory and how to troubleshoot memory leaks In the app's project file (`.csproj`), add following properties for the duration of the investigation: ```xml - + true @@ -40,7 +40,7 @@ In the app's project file (`.csproj`), add following properties for the duration > [!WARNING] > Don't enable diagnostics in production because it has a negative performance impact. -Build your application with `wasm-tools` workload. +Build your app with the `wasm-tools` workload. Open the app in a browser and navigate to problematic pages or components. @@ -50,20 +50,20 @@ Take a managed memory dump by calling `collectGcDump` JavaScript API: globalThis.getDotnetRuntime(0).collectGcDump(); ``` -This API could be called from a browser devoloper tools console or JavaScript code of your app. +Call the preceding API from either a browser devoloper tools console or JavaScript code of the app. A `.nettrace` file is downloaded from the browser into a local folder. -Convert the dump to `.gcdump` format using `dotnet-gcdump` tool. To view the converted `.gcdump` file, use Visual Studio or PrefView. +Convert the dump to `.gcdump` format using the `dotnet-gcdump` tool. To view the converted `.gcdump` file, use Visual Studio or PrefView. 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). -## Scenario: How a WebAssembly app uses CPU and how to find slow or hot methods +## How a WebAssembly app uses CPU and how to find slow or hot methods In the app's project file (`.csproj`), add following properties for the duration of the investigation: ```xml - + true all @@ -83,7 +83,7 @@ Start colllecting CPU samples for 60 seconds by calling the `collectCpuSamples` globalThis.getDotnetRuntime(0).collectCpuSamples({durationSeconds: 60}); ``` -This API could be called from a browser devoloper tools console or JavaScript code of your app. +Call the preceding API from either a browser devoloper tools console or JavaScript code of the app. Start using the app to run problematic code. @@ -93,12 +93,12 @@ For more information, see [Use EventPipe to trace your .NET application](/dotnet The [`Timing-Allow-Origin` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin) allows for more precise time measurements. -## Scenario: How to observe metrics emmited by a WebAssembly app +## How to observe metrics emmited by a WebAssembly app In the app's project file (`.csproj`), add following properties for the duration of the investigation: ```xml - + true true @@ -119,7 +119,7 @@ Start colllecting metrics for 60 seconds by calling the `collectMetrics` JavaScr globalThis.getDotnetRuntime(0).collectMetrics({durationSeconds: 60}); ``` -This API could be called from a browser devoloper tools console or JavaScript code of your app. +Call the preceding API from either a browser devoloper tools console or JavaScript code of the app. After the predefined period, the browser downloads a `.nettrace` file into a local folder. To view the `.nettrace` file, use Visual Studio or PrefView. From 61507d7651e55a8a118d7539d8ccdfd8e0b3599f Mon Sep 17 00:00:00 2001 From: Pavel Savara Date: Thu, 5 Jun 2025 15:01:56 +0200 Subject: [PATCH 5/5] WasmDebugLevel --- .../webassembly-browser-developer-tools-diagnostics.md | 2 ++ .../blazor/performance/webassembly-event-pipe-diagnostics.md | 3 +++ 2 files changed, 5 insertions(+) diff --git a/aspnetcore/blazor/performance/webassembly-browser-developer-tools-diagnostics.md b/aspnetcore/blazor/performance/webassembly-browser-developer-tools-diagnostics.md index ccf9df2c5b73..317c5033f856 100644 --- a/aspnetcore/blazor/performance/webassembly-browser-developer-tools-diagnostics.md +++ b/aspnetcore/blazor/performance/webassembly-browser-developer-tools-diagnostics.md @@ -54,6 +54,8 @@ In the app's project file (`.csproj`): browser; false true + + 0 ``` diff --git a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md index c2e60093e999..16b2e2a374a4 100644 --- a/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md +++ b/aspnetcore/blazor/performance/webassembly-event-pipe-diagnostics.md @@ -66,6 +66,9 @@ In the app's project file (`.csproj`), add following properties for the duration true + + 0 + all ```