ASP.NET Core Blazor WebAssembly 瀏覽器開發人員工具診斷

2025-05-13

本文說明應用程式中的瀏覽器開發人員工具診斷工具 Blazor WebAssembly 。

先決條件

dotnet workload install wasm-tools

瀏覽器開發人員工具

您可以在瀏覽器的開發人員工具控制台中使用診斷分析工具手動分析應用程式程式碼。

內建診斷功能可供追蹤：

預先編譯（AOT）
呼叫規格（"callspec"，函式呼叫的順序和計時）和工具化

下表中的 MSBuild 屬性會啟用分析工具整合。

房產	預設	將值設定為...	說明
`<WasmProfilers>`	沒有值	`browser`	可使用的Mono分析工具。潛在值為 “`browser`” 和 “`log`”。若要同時使用這兩者，請以分號分隔值。分析工具 `browser` 可讓您與瀏覽器的開發人員工具分析工具整合。
`<WasmNativeStrip>`	`true`	`false`	啟用移除原生可執行檔。
`<WasmNativeDebugSymbols>`	`true`	`true`	啟用使用原生偵錯符號進行建置。

設定 Timing-Allow-Origin HTTP 標頭允許更精確的時間測量。

啟用性能分析工具會對應用程式的大小和效能造成負面影響，因此，請勿在生產環境中發佈已啟用性能分析工具的應用程式。在以下範例中，條件是在屬性群組區段上設定，只有在使用 /p:BlazorSampleProfilingEnabled=true (.NET CLI) 或在 Visual Studio 發佈設定檔中使用 <BlazorSampleProfilingEnabled>true</BlazorSampleProfilingEnabled> 進行建置時，才會啟用程式代碼剖析，其中“BlazorSampleProfilingEnabled”是您選擇的自定義符號名稱，而且不會與其他符號名稱衝突。

在應用程式的項目檔中（.csproj）：

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

或者，使用 .NET CLI 建置應用程式時啟用功能。下列傳遞至 dotnet build 命令的選項會鏡像上述 MS Build 屬性組態：

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

使用 <WasmProfilers> 設定 WebAssembly 分析工具不需要預先編譯（AOT）。

瀏覽器開發人員工具分析工具可以搭配 AOT 使用（<RunAOTCompilation>/<RunAOTCompilationAfterBuild> 設定為 true），而不需要 WebAssembly 分析工具（<WasmProfilers> 已移除）。

若要查看開發人員工具控制台中的 AOT 方法名稱，請安裝 DWARF Chrome 擴充功能。

設定範例間隔

在應用程式的項目檔中設定範例間隔。在下列範例中 {INTERVAL} ，佔位符代表以毫秒為單位的時間。如果未 sampleIntervalMs 指定，則預設設定為10毫秒。

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

通話規格（callspec）

如果您想要篩選已分析的方法，請使用呼叫規格（callspec）。

將 callspec 連同篩選條件添加到 browser 元素中的 <WasmProfilers> WebAssembly 分析工具：

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

下表顯示允許的{FILTER}佔位元值。

篩選器	說明
`all`	所有組件
`program`	進入點元件
`{ASSEMBLY}`	指定組件（`{ASSEMBLY}`）
`M:Type:{METHOD}`	指定方法（`{METHOD}`）
`N:{NAMESPACE}`	指定命名空間（`{NAMESPACE}`）
`T:{TYPE}`	指定類型（`{TYPE}`）
`+EXPR`	包含表達式
`-EXPR`	排除表達式

在下列範例中，已分析的方法會篩選至應用程式的命名空間 SampleApp ，取樣間隔為 50 毫秒。

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

共用方式為