ASP.NET Core 앱 디버그

이 문서에서는 브라우저 개발자 도구 또는 IDE(통합 개발 환경)를 사용하여 앱 디버깅을 포함하여 앱을 디버그 Blazor 하는 Blazor WebAssembly 방법을 설명합니다.

Blazor Web Apps는 Visual Studio 또는 Visual Studio Code에서 디버그할 수 있습니다.

Blazor WebAssembly 앱을 디버그할 수 있습니다.

• Visual Studio 또는 Visual Studio Code에서
• Microsoft Edge, Google Chrome 및 Firefox를 비롯한 Chromium 기반 브라우저에서 브라우저 개발자 도구 사용

디버깅에 Blazor WebAssembly 사용할 수 있는 시나리오는 다음과 같습니다.

• 중단점을 설정하고 제거합니다.
• IDE에서 디버깅 지원으로 앱을 실행합니다.
• 코드를 한 단계씩 실행합니다.
• IDE에서 바로 가기 키를 사용하여 코드 실행을 계속합니다.
• ‘로컬’ 창에서 지역 변수의 값을 확인합니다.
• JavaScript와 .NET 간의 호출 체인을 포함한 호출 스택을 확인합니다.
• Visual Studio 기본 설정으로 구성된 디버깅에 기호 서버를 사용합니다.

지원되지 않는 시나리오는 다음과 같습니다.

• 비로컬 시나리오(예: Linux용 Windows 하위 시스템(WSL) 또는 Visual Studio Codespaces)에서 디버그합니다.
• Visual Studio 또는 Visual Studio Code에서 Firefox에서 디버그합니다.

필수 조건

이 섹션에서는 디버깅을 위한 필수 구성 요소를 설명합니다.

브라우저 필수 구성 요소

다음 브라우저의 최신 버전:

• Google Chrome
• Microsoft Edge
• Firefox(브라우저 개발자 도구만 해당)

방화벽 또는 프록시가 디버그 프록시(NodeJS 프로세스)와의 통신을 차단하지 않아야 합니다. 자세한 내용은 방화벽 구성 섹션을 참조하세요.

참고 항목

macOS의 Apple Safari는 현재 지원되지 않습니다.

IDE 필수 구성 요소

최신 버전의 Visual Studio 또는 Visual Studio Code가 필요합니다.

Visual Studio Code 필수 구성 요소

Visual Studio Code에는 Visual Studio Code용 C# 개발 키트(VS Code에서 C# 시작)가 필요합니다. Visual Studio Code 확장 마켓플레이스에서 확장 목록을 "c# dev kit"로 필터링하여 확장을 찾습니다.

C# Dev Kit를 설치하면 다음과 같은 추가 확장이 자동으로 설치됩니다.

• .NET 설치 도구
• C#
• C# 개발자 키트용 IntelliCode

경고 또는 오류가 발생하면 문제를 설명하는 문제(microsoft/vscode-dotnettoolsGitHub 리포지토리)를 열 수 있습니다.

앱 구성 필수 구성 요소

이 하위 섹션의 지침은 클라이언트 쪽 디버깅에 적용됩니다.

Properties/launchSettings.json 시작 프로젝트의 파일을 엽니다. 파일 노드의 각 시작 프로필에 다음 inspectUri 속성이 profiles 있는지 확인합니다. 다음 속성이 없으면 각 프로필에 추가합니다.

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

inspectUri 속성은

• Blazor 앱이라는 것을 검색하도록 IDE를 설정합니다.
• Blazor의 디버깅 프록시를 통해 브라우저에 연결하도록 스크립트 디버깅 인프라에 지시합니다.

시작된 브라우저(browserInspectUri)의 Websocket 프로토콜(wsProtocol), 호스트(url.hostname), 포트(url.port) 및 검사기 URI에 대한 자리 표시자 값은 프레임워크에서 제공됩니다.

패키지

Blazor Web Apps: Microsoft.AspNetCore.Components.WebAssembly.Server브라우저 디버그 호스트를 공유하는 어셈블리에 대한 내부 패키지(Microsoft.NETCore.BrowserDebugHost.Transport)를 참조합니다.

독립 실행형 Blazor WebAssembly: Microsoft.AspNetCore.Components.WebAssembly.DevServer앱을 빌드 Blazor 할 때 사용할 개발 서버입니다. 내부적으로 UseWebAssemblyDebugging을 호출하여 Chromium 개발자 도구 내에서 Blazor WebAssembly 앱을 디버깅하기 위한 미들웨어를 추가합니다.

참고 항목

.NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.

IDE에서 디버그 Blazor Web App

Visual Studio

이 섹션의 예제에서는 자동(서버 및 WebAssembly)의 대화형 렌더링 모드와 구성 요소별 대화형 대화형 위치를 만든 Blazor Web App 것으로 가정합니다.

1. 앱을 엽니다.
2. 클라이언트 프로젝트.Client()의 currentCount++; 구성 요소(Pages/Counter.razor)에 있는 Counter 줄에 중단점을 설정합니다.
3. 솔루션 탐색기 서버 프로젝트를 선택한 상태에서 F5 키를 눌러 디버거에서 앱을 실행합니다.
4. 브라우저에서 .에서 /counter페이지로 Counter 이동합니다. 디버그 프록시가 로드되고 실행되기까지 몇 초 정도 기다립니다. 클릭하기 단추를 선택하여 중단점을 누릅니다.
5. Visual Studio에서 지역 창에 있는 currentCount 필드의 값을 검사합니다.
6. F5 키를 눌러 실행을 계속합니다.

중단점은 정적으로 렌더링되고 대화형으로 렌더링된 서버 쪽 구성 요소에서 서버 프로젝트에서 적중될 수도 있습니다.

1. 디버거를 중지합니다.
2. 서버 앱에서 정적으로 렌더링된 Weather 구성 요소(Components/Pages/Weather.razor)를 열고 메서드의 OnInitializedAsync 아무 곳이나 중단점을 설정합니다.
3. F5 키를 눌러 디버거에서 앱을 실행합니다.
4. 브라우저에서 .에서 페이지/weather로 이동합니다Weather. 디버그 프록시가 로드되고 실행되기까지 몇 초 정도 기다립니다. 중단점에서 애플리케이션 실행이 중지됩니다.
5. F5 키를 눌러 실행을 계속합니다.

앱 시작 도중 디버그 프록시가 실행되기 전에 중단점이 적중되지 않습니다. 여기에는 파일의 Program 중단점과 앱에서 OnInitialized{Async} 요청한 첫 번째 페이지에서 로드하는 구성 요소의 수명 주기 메서드 에 중단점이 포함됩니다.

Visual Studio Code

이 섹션의 예제에서는 대화형 자동(서버 및 WebAssembly) 렌더링 모드 및 구성 요소별 대화형 위치로 만든 Blazor Web App 것으로 가정합니다.

1. 서버 및 .Client 프로젝트 폴더가 포함된 폴더인 솔루션 폴더를 열어 Visual Studio Code에서 앱을 엽니다.
2. 클라이언트 프로젝트.Client()의 currentCount++; 구성 요소(Pages/Counter.razor)에 있는 Counter 줄에 중단점을 설정합니다.
3. 실행 및 디버그 창을 열고 실행 및 디버그 단추를 선택합니다. 또는 F5 키를 누릅니다(디버깅 시작). C# UI 맨 위에 있는 명령 팔레트에서 디버거를 선택합니다. 서버 프로젝트의 기본 프로필(예: C#:BlazorSample [Default Configuration])을 선택합니다.
4. 브라우저에서 .에서 /counter페이지로 Counter 이동합니다. 디버그 프록시가 로드되고 실행되기까지 몇 초 정도 기다립니다. 클릭하기 단추를 선택하여 중단점을 누릅니다.
5. UI에서 계속 단추를 선택하거나 F5(계속)를 눌러 실행을 계속합니다.

서버 프로젝트에서 중단점이 적중될 수도 있습니다.

1. 중지 단추를 선택하여 디버깅을 중지하거나 키보드에서 Shift+F5를 누릅니다.
2. 서버 앱에서 정적으로 렌더링된 Weather 구성 요소(Components/Pages/Weather.razor)를 열고 메서드의 OnInitializedAsync 아무 곳이나 중단점을 설정합니다.
3. UI에서 디버깅 시작 단추를 선택하거나 F5(디버깅 시작)를 눌러 디버거에서 앱을 실행합니다.
4. 브라우저에서 .에서 페이지/weather로 이동합니다Weather. 디버그 프록시가 로드되고 실행되기까지 몇 초 정도 기다립니다. 중단점에서 애플리케이션 실행이 중지됩니다.
5. UI에서 계속 단추를 선택하거나 F5(계속)를 눌러 실행을 계속합니다.

앱 시작 도중 디버그 프록시가 실행되기 전에 중단점이 적중되지 않습니다. 여기에는 파일의 Program 중단점과 앱에서 OnInitialized{Async} 요청한 첫 번째 페이지에서 로드하는 구성 요소의 수명 주기 메서드 에 중단점이 포함됩니다.

디버깅하지 않고 시작[Ctrl+F5(Windows) 또는 ⌘+F5(macOS)]는 지원되지 않습니다. 디버그 구성에서 앱을 실행하는 경우 디버깅 오버헤드로 인해 항상 약간의 성능 저하가 발생합니다.

IDE에서 앱 디버그 Blazor WebAssembly

Visual Studio

1. 앱을 엽니다.
2. 구성 요소(Pages/Counter.razor)의 currentCount++; 줄에 Counter 중단점을 설정합니다.
3. F5 키를 눌러 디버거에서 앱을 실행합니다.
4. 브라우저에서 .에서 /counter페이지로 Counter 이동합니다. 디버그 프록시가 로드되고 실행되기까지 몇 초 정도 기다립니다. 클릭하기 단추를 선택하여 중단점을 누릅니다.
5. Visual Studio에서 지역 창에 있는 currentCount 필드의 값을 검사합니다.
6. F5 키를 눌러 실행을 계속합니다.

앱 시작 도중 디버그 프록시가 실행되기 전에 중단점이 적중되지 않습니다. 여기에는 파일의 Program 중단점과 앱에서 OnInitialized{Async} 요청한 첫 번째 페이지에서 로드하는 구성 요소의 수명 주기 메서드 에 중단점이 포함됩니다.

Visual Studio Code

1. Visual Studio Code에서 앱의 폴더를 엽니다.
2. 구성 요소(Pages/Counter.razor)의 currentCount++; 줄에 Counter 중단점을 설정합니다.
3. 실행 및 디버그 창을 열고 실행 및 디버그 단추를 선택합니다. 또는 F5 키를 누릅니다(디버깅 시작). C# UI 맨 위에 있는 명령 팔레트에서 디버거를 선택합니다. 기본 프로필(예: C#:BlazorSample [Default Configuration])을 선택합니다.
4. F5 키를 눌러 디버거에서 앱을 실행합니다.
5. 독립 실행형 앱이 시작되고 디버깅 브라우저가 열립니다.
6. 브라우저에서 .에서 /counter페이지로 Counter 이동합니다. 디버그 프록시가 로드되고 실행되기까지 몇 초 정도 기다립니다. 클릭하기 단추를 선택하여 중단점을 누릅니다.
7. F5 키를 눌러 실행을 계속합니다.

앱 시작 도중 디버그 프록시가 실행되기 전에 중단점이 적중되지 않습니다. 여기에는 파일의 Program 중단점과 앱에서 OnInitialized{Async} 요청한 첫 번째 페이지에서 로드하는 구성 요소의 수명 주기 메서드 에 중단점이 포함됩니다.

디버깅하지 않고 시작[Ctrl+F5(Windows) 또는 ⌘+F5(macOS)]는 지원되지 않습니다. 디버그 구성에서 앱을 실행하는 경우 디버깅 오버헤드로 인해 항상 약간의 성능 저하가 발생합니다.

기존 Visual Studio Code 디버깅 세션에 연결

실행 중인 Blazor 앱에 연결하려면 파일을 열고 .vscode/launch.json 자리 표시자를 앱이 실행 중인 URL로 바꿉 {URL} 다.

{
  "name": "Attach and Debug",
  "type": "blazorwasm",
  "request": "attach",
  "url": "{URL}"
}

Visual Studio Code 시작 옵션

다음 표의 시작 구성 옵션은 디버그 유형(.vscode/launch.json)에 blazorwasm 대해 지원됩니다.

옵션	설명
browser	디버깅 세션을 시작하는 브라우저입니다. edge 또는 chrome로 설정합니다. 기본값은 edge입니다.
cwd	앱을 시작할 작업 디렉터리입니다.
request	launch를 사용해 시작하고 Blazor WebAssembly 앱에 디버깅 세션을 연결하거나 attach를 사용해 이미 실행 중인 앱에 디버깅 세션을 연결할 수 있습니다.
timeout	디버깅 세션이 연결되기를 기다릴 밀리초 수입니다. 기본값은 30,000 밀리초(30초)입니다.
trace	JS 디버거에서 로그를 생성하는 데 사용됩니다. 로그를 생성하려면 true로 설정합니다.
url	디버깅할 때 브라우저에서 열 URL입니다.
webRoot	웹 서버의 절대 경로를 지정합니다. 하위 경로에서 앱이 제공되는 경우 설정해야 합니다.

Google Chrome 또는 Microsoft Edge를 사용하여 디버그 Blazor WebAssembly

이 섹션의 지침은 다음의 디버깅 Blazor WebAssembly 앱을 적용합니다.

• Windows 또는 macOS에서 실행되는 Google Chrome.
• *Windows에서 실행되는 Microsoft Edge입니다.

1. 또는 )을 사용하여 명령 셸 dotnet watch dotnet run에서 앱을 실행합니다.

2. 브라우저를 시작하고 앱의 URL로 이동합니다.

3. 다음을 눌러 원격 디버깅을 시작합니다.

   • Windows에서 Alt+d를 이동합니다.+
   • macOS에서 Shift+⌘+d.

   브라우저는 원격 디버깅을 사용하도록 설정하고 실행해야 합니다(기본값 아님). 원격 디버깅을 사용하지 않도록 설정하면 디버깅 포트가 열려 있는 브라우저를 시작하라는 지침과 함께 디버깅 가능한 브라우저 탭을 찾을 수 없음 오류 페이지가 렌더링됩니다. 브라우저에 대한 지침을 따릅니다.

   원격 디버깅을 사용하도록 설정하기 위한 지침에 따라 앱이 새 브라우저 창에서 열립니다. 새 브라우저 창에서 HotKey 조합을 눌러 원격 디버깅을 시작합니다.

   • Windows에서 Alt+d를 이동합니다.+
   • macOS에서 Shift+⌘+d.

   앱의 고스트 이미지를 보여 주는 새 창 개발자 도구 브라우저 탭이 열립니다.

   참고 항목

   지침에 따라 원격 디버깅을 사용하도록 설정된 새 브라우저 탭을 연 경우 원래 브라우저 창을 닫고 첫 번째 탭에서 앱을 실행하는 두 번째 탭과 디버거를 실행하는 두 번째 탭이 열린 상태로 두 번째 창을 닫을 수 있습니다.

4. 잠시 후 원본 탭에는 앱의 .NET 어셈블리 및 페이지 목록이 표시됩니다.

5. file:// 노드를 엽니다. 구성 요소 코드(.razor 파일) 및 C# 코드 파일(.cs)에서는 앱의 브라우저 탭(원격 디버깅을 시작한 후 열린 초기 탭)에서 코드가 실행될 때 설정한 중단점이 적중됩니다. 중단점이 적중되면 디버깅 탭에서 코드 또는 다시 시작(F8) 코드 실행을 통해 F10(단일 단계)을 실행합니다.

Chromium 기반 브라우저 디버깅 Blazor 의 경우 Chrome DevTools 프로토콜을 구현하고 프로토콜을 보강하는 디버깅 프록시를 제공합니다. NET 관련 정보입니다. 디버깅 바로 가기 키를 누르면 Blazor는 프록시에 있는 Chrome DevTools를 가리킵니다. 프록시는 디버그하려는 브라우저 창에 연결되므로 원격 디버깅을 사용하도록 설정해야 합니다.

Firefox를 사용하여 Blazor WebAssembly 앱 디버그

이 섹션의 지침은 Windows에서 실행되는 Firefox의 디버깅 Blazor WebAssembly 앱을 적용합니다.

Firefox를 Blazor WebAssembly 사용하여 앱을 디버깅하려면 .NET WebAssembly 디버깅 프록시를 통해 브라우저 개발자 도구를 사용하여 원격 디버깅을 위해 브라우저를 구성하고 브라우저에 연결해야 합니다.

참고 항목

현재 Visual Studio에서 Firefox의 디버깅은 지원되지 않습니다.

개발 중에 Firefox에서 앱을 디버그하려면 다음을 Blazor WebAssembly 수행합니다.

1. Firefox 구성:
   • 새 브라우저 탭에서 엽니다 about:config . 표시되는 경고를 읽고 해제합니다.
   • 값을 True.로 설정하여 사용하도록 devtools.debugger.remote-enabled 설정합니다.
   • 값을 True.로 설정하여 사용하도록 devtools.chrome.enabled 설정합니다.
   • 해당 값을 False.로 설정하여 사용하지 않도록 설정합니다devtools.debugger.prompt-connection.
2. 모든 Firefox 인스턴스를 닫습니다.
3. 또는 )을 사용하여 명령 셸 dotnet watch dotnet run에서 앱을 실행합니다.
4. Firefox 브라우저를 다시 시작하고 앱으로 이동합니다.
5. 새 브라우저 탭에서 엽니다 about:debugging . 이 탭을 열어 둡니다.
6. 앱이 실행 중인 탭으로 돌아갑니다. Shift+Alt+d를 눌러 원격 디버깅을 시작합니다.
7. 탭에서 Debugger 노드 아래에서 file:// 디버그하려는 앱 원본 파일을 열고 중단점을 설정합니다. 예를 들어 구성 요소(Pages/Counter.razor)의 Counter 메서드에서 줄에 IncrementCount 중단점을 currentCount++; 설정합니다.
8. 앱의 Counter 브라우저 탭에서 구성 요소 페이지(/counter)로 이동하고 카운터 단추를 선택하여 중단점을 누릅니다.
9. F5 키를 눌러 디버깅 탭에서 실행을 계속합니다.

처리되지 않은 예외에 대한 중단

디버거는 개발자 코드에서 처리되지 않은 예외를 catch하기 때문에 Blazor 처리되지 않은 예외를 중단하지 않습니다.

처리되지 않은 예외를 중단하려면 다음을 수행합니다.

• Visual Studio에서 디버거의 예외 설정(Windows>예외 설정 디버그>)을 엽니다.
• 다음 JavaScript 예외 설정을 지정합니다 .
  • 모든 예외
  • Catch되지 않은 예외

브라우저 소스 맵

브라우저 소스 맵을 사용하면 브라우저에서 컴파일된 파일을 원래 소스 파일에 다시 매핑할 수 있으며, 일반적으로 클라이언트 쪽 디버깅에 사용됩니다. 그러나 Blazor는 현재 C#을 JavaScript/WASM에 직접 매핑하지 않습니다. 대신, Blazor가 브라우저 내에서 IL 해석을 수행하므로 소스 맵은 관련이 없습니다.

방화벽 구성

방화벽이 디버그 프록시와의 통신을 차단하는 경우 브라우저와 NodeJS 프로세스 간의 통신을 허용하는 방화벽 예외 규칙을 만듭니다.

Warning

보안 취약성이 발생하지 않게 하려면 방화벽 구성을 신중하게 수정해야 합니다. 보안 지침을 신중하게 적용하고, 보안 모범 사례를 따르고, 방화벽 제조업체에서 발급한 경고를 준수합니다.

NodeJS 프로세스와의 개방형 통신 허용:

• 방화벽의 기능과 구성에 따라 모든 연결에 노드 서버를 엽니다.
• 네트워크에 따라 위험할 수 있습니다.
• 개발자 컴퓨터에서만 권장됩니다.

가능하면 신뢰할 수 있는 네트워크 또는 비공개 네트워크의 NodeJS 프로세스와의 개방형 통신만 허용합니다.

Windows 방화벽 구성 지침은 인바운드 프로그램 또는 서비스 규칙 만들기를 참조하세요. 자세한 내용은 Windows 방화벽 설명서 집합의 고급 보안이 포함된 Windows Defender 방화벽 및 관련 문서를 참조하세요.

문제 해결

오류가 발생할 경우 다음 팁이 도움이 될 수 있습니다.

• 중단점 제거:
  • Google Chrome: 디버거 탭에서 브라우저에서 개발자 도구를 엽니다. 콘솔에서 localStorage.clear()를 실행하여 중단점을 모두 제거합니다.
  • Microsoft Edge: 애플리케이션 탭에서 로컬 스토리지를 엽니다. 사이트를 마우스 오른쪽 단추로 클릭하고 지우기를 선택합니다.
• ASP.NET Core HTTPS 개발 인증서를 설치하고 신뢰할 수 있는지 확인합니다. 자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.
• Visual Studio에서는 도구>옵션>디버깅 일반에서 ASP.NET(Chrome 및 Edge)에 JavaScript 디버깅을>사용하도록 설정해야 합니다. 이것은 Visual Studio의 기본 설정입니다. 디버깅이 작동하지 않는 경우 옵션이 선택되어 있는지 확인합니다.
• 사용자 환경에서 HTTP 프록시를 사용하는 경우 localhost가 프록시 바이패스 설정에 포함되는지 확인합니다. 이 작업은 다음 중 하나에서 환경 변수를 NO_PROXY 설정하여 수행할 수 있습니다.
  • 프로젝트의 launchSettings.json 파일에서.
  • 모든 앱에 적용할 사용자 또는 시스템 환경 변수 수준에서. 환경 변수를 사용하는 경우 변경을 적용하려면 Visual Studio를 다시 시작합니다.
• 방화벽 또는 프록시가 디버그 프록시(NodeJS 프로세스)와의 통신을 차단하지 않아야 합니다. 자세한 내용은 방화벽 구성 섹션을 참조하세요.

OnInitialized{Async}의 중단점이 적중되지 않음

프레임워크의 디버깅 프록시는 Blazor 앱 시작 시 즉시 시작되지 않으므로 수명 주기 메서드의 OnInitialized{Async} 중단점이 적중되지 않을 수 있습니다. 메서드 본문의 시작 부분에 지연을 추가하여 중단점이 적중될 때까지 디버그 프록시가 시작될 시간 여유를 주는 것이 좋습니다. if 컴파일러 지시문에 따라 지연을 포함하여 앱의 릴리스 빌드에 지연이 존재하지 않도록 할 수 있습니다.

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Visual Studio(Windows) 시간 제한

Visual Studio에서 시간 제한에 도달했다는 메시지가 표시되며 디버그 어댑터가 실행되지 않는 예외가 throw되는 경우 레지스트리 설정을 사용하여 시간 제한을 조정할 수 있습니다.

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

이전 명령의 {TIMEOUT} 자리 표시자는 밀리초 단위입니다. 예를 들어 1분은 60000으로 할당됩니다.