ASP.NET Core Blazor WebAssembly 브라우저 개발자 도구 진단

2025-05-22

이 문서에서는 Blazor WebAssembly 앱의 브라우저 개발자 도구를 사용한 진단 방법을 설명합니다.

전제 조건

dotnet workload install wasm-tools

브라우저 개발자 도구

브라우저의 개발자 도구 콘솔에서 진단 프로파일러를 사용하여 앱 코드를 수동으로 프로파일러할 수 있습니다.

기본 제공 진단 기능을 사용하여 추적할 수 있습니다.

AOT(Ahead-Of-Time) 컴파일
호출 사양(""callspec, 함수 호출 시퀀스 및 타이밍) 및 계측

다음 표의 MSBuild 속성은 프로파일러 통합을 사용하도록 설정합니다.

재산	기본값	값을 ...로 설정합니다.	설명
`<WasmProfilers>`	값 없음	`browser`	사용할 Mono 프로파일러입니다. 잠재적 값은 "`browser`" 및 "`log`"입니다. 둘 다 사용하려면 값을 세미콜론으로 구분합니다. `browser` 프로파일러를 사용하면 브라우저의 개발자 도구 프로파일러와 통합할 수 있습니다.
`<WasmNativeStrip>`	`true`	`false`	네이티브 실행 파일을 제거할 수 있습니다.
`<WasmNativeDebugSymbols>`	`true`	`true`	네이티브 디버그 기호를 사용하여 빌드할 수 있습니다.

HTTP 헤더를Timing-Allow-Origin 설정하면 보다 정확한 시간 측정을 수행할 수 있습니다.

프로파일러를 사용하도록 설정하면 크기 및 성능에 부정적인 영향을 주므로 프로파일러를 사용하도록 설정된 프로덕션용 앱을 게시하지 마세요. 다음 예제에서는 앱이 (.NET CLI)를 사용하여 빌드 /p:BlazorSampleProfilingEnabled=true 되거나 <BlazorSampleProfilingEnabled>true</BlazorSampleProfilingEnabled> Visual Studio 게시 프로필에서만 프로파일링을 사용하도록 설정하는 속성 그룹 섹션에서 조건이 설정됩니다. 여기서 "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

WebAssembly 프로파일러를 <WasmProfilers> 설정해도 AOT(미리 실행) 컴파일이 필요하지 않습니다.

브라우저 개발자 도구 프로파일러를 AOT(<RunAOTCompilation>/<RunAOTCompilationAfterBuild> 로 설정 true)와 WebAssembly 프로파일러 없이 사용할 수 있습니다(<WasmProfilers> 제거됨).

개발자 도구 콘솔에서 AOT 메서드 이름을 보려면 DWARF Chrome 확장을 설치합니다.

샘플 간격 설정

앱의 프로젝트 파일에서 샘플 간격을 구성합니다. 다음 예제 {INTERVAL} 에서 자리 표시자는 시간(밀리초)을 나타냅니다. 지정되지 않은 경우 sampleIntervalMs 기본 설정은 10ms입니다.

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

통화 사양(callspec)

프로파일된 메서드를 필터링하려면 호출 사양(callspec)을 사용합니다.

callspec 요소의 browser WebAssembly 프로파일러에 필터와 함께 <WasmProfilers>을 추가합니다.

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

허용 가능한 {FILTER} 자리 표시자 값은 다음 표에 나와 있습니다.

필터	설명
`all`	모든 어셈블리
`program`	진입점 조립
`{ASSEMBLY}`	어셈블리를 지정합니다(`{ASSEMBLY}`).
`M:Type:{METHOD}`	메서드`{METHOD}`()를 지정합니다.
`N:{NAMESPACE}`	네임스페이스(`{NAMESPACE}`)를 지정합니다.
`T:{TYPE}`	형식(`{TYPE}`)을 지정합니다.
`+EXPR`	표현 포함
`-EXPR`	표현 제외

다음 예제에서 프로파일링된 메서드는 앱의 네임스페이스 SampleApp 로 필터링되고 샘플링 간격은 50ms입니다.

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