ASP.NET Core 앱 디버그

참고

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 10 버전을 참조하세요.

경고

이 버전의 ASP.NET Core는 더 이상 지원되지 않습니다. 자세한 내용은 .NET 및 .NET Core 지원 정책을 참조 하세요. 현재 릴리스는 이 문서의 .NET 10 버전을 참조하세요.

이 문서에서는 브라우저 개발자 도구 또는 통합 개발 환경(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 기본 설정으로 구성된 디버깅에 기호 서버를 사용합니다.

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

Blazor Server Visual Studio 또는 Visual Studio Code에서 앱을 디버그할 수 있습니다.

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

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

Blazor WebAssembly 앱에 지원되지 않는 시나리오는 다음과 같습니다:

  • 중단점을 설정하고 제거합니다.
  • IDE에서 디버깅 지원으로 앱을 실행합니다.
  • 코드를 한 단계씩 실행합니다.
  • IDE에서 바로 가기 키를 사용하여 코드 실행을 계속합니다.
  • ‘로컬’ 창에서 지역 변수의 값을 확인합니다.
  • JavaScript와 .NET 간의 호출 체인을 포함한 호출 스택을 확인합니다.
  • 비로컬 시나리오(예: Linux용 Windows 하위 시스템(WSL) 또는 Visual Studio Codespaces)에서 디버그합니다.
  • 디버깅에 기호 서버를 사용합니다.

Blazor Server Visual Studio 또는 Visual Studio Code에서 앱을 디버그할 수 있습니다.

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

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

Blazor WebAssembly 앱에 지원되지 않는 시나리오는 다음과 같습니다:

Blazor WebAssembly 게이트웨이

Microsoft.AspNetCore.Components.Gateway 개발 및 프로덕션 중에 독립 실행형 Blazor WebAssembly 앱을 제공하는 경량 ASP.NET Core 호스트입니다.

게이트웨이는 정적 파일 개발 도구가 아니라 전체 ASP.NET Core 호스트이므로 독립 실행형 Blazor WebAssembly 앱 기능:

  • 기본 제공 SPA 폴백 라우팅: 정적 자산과 일치하지 않는 요청은 index.html로 대체되므로, 사용자 지정 MSBuild 대상 없이도 /orders/42와 같은 클라이언트 측 경로가 브라우저 새로 고침과 직접 탐색 시 작동합니다.
  • 호스트당 여러 Blazor WebAssembly 클라이언트: 단일 게이트웨이 인스턴스는 ClientApps 섹션을 통해 구성된 서로 다른 경로 접두사로 둘 이상의 Blazor WebAssembly 클라이언트를 지원할 수 있습니다. 이는 .NET Aspire가 단일 AppHost 실행에서 백엔드 서비스와 함께 Blazor WebAssembly 클라이언트를 호스팅하는 데 사용하는 통합 지점입니다.
  • 기본 제공 YARP 역방향 프록시 인프라: YARP는 게이트웨이와 함께 번들로 제공되므로 WebAssembly 클라이언트와 함께 백 엔드 트래픽을 전달하고 다중 클라이언트 시나리오를 Aspire 사용하도록 설정할 수 있습니다.

.NET 11 이상을 대상으로 하는 기존 독립 실행형 Blazor WebAssembly 앱에서 게이트웨이를 채택하려면 앱의 프로젝트 파일에서 Microsoft.AspNetCore.Components.Gateway 패키지를 참조하세요.

참고

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

사용자 지정 라우팅 코드 및 미들웨어는 앱에서 필요하지 않습니다. 대체 엔드포인트는 속성이 앱의 프로젝트 파일에 설정될 때 StaticWebAssetSpaFallbackEnabled SDK에서 내보내는 정적 웹 자산 매니페스트에서 가져옵니다. 이 속성은 기본적으로 프로젝트 템플릿에서 만든 독립 실행형 Blazor WebAssembly 앱에 있습니다.

<StaticWebAssetSpaFallbackEnabled>true</StaticWebAssetSpaFallbackEnabled>

필수 조건

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

브라우저 필수 구성 요소

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

  • 구글 크롬
  • 마이크로소프트 엣지
  • Firefox(브라우저 개발자 도구만 해당)

디버깅을 수행하려면 다음 브라우저의 최신 버전이 필요합니다.

  • Google Chrome(기본값)
  • 마이크로소프트 엣지

방화벽 또는 프록시가 디버그 프록시(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"로 필터링하여 확장을 찾습니다.

Visual Studio Code 확장 마켓플레이스의 C# 개발자 키트

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

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

앱 구성 필수 구성 요소

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

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

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

inspectUri 속성:

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

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

참고

앱이 .NET CLI로 실행되면 기본적으로 launchSettings.json에서 commandName이 Project인 첫 번째 시작 프로필이 사용됩니다. 다른 프로필(예: https)을 사용하려면 -lp|--launch-profile 또는 에 dotnet watch을 전달하거나 선호하는 프로필을 파일 맨 위로 이동하세요.

패키지

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

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

독립 실행형 Blazor WebAssembly: Microsoft.AspNetCore.Components.Gateway: 개발 및 프로덕션 중에 독립 실행형 Blazor WebAssembly 앱을 제공하기 위한 간단한 ASP.NET Core 호스트입니다.

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

호스팅된 Blazor WebAssembly:

참고

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

IDE에서 Blazor Web App 디버그하기

이 섹션의 예제에서는 대화형 렌더링 모드를 Auto(서버 및 WebAssembly)로, 대화형 위치를 구성 요소별로 설정한 Blazor Web App를 만들었다고 가정합니다.

  1. 앱을 엽니다.
  2. 클라이언트 프로젝트currentCount++;()의 Counter 구성 요소(Pages/Counter.razor)에 있는 .Client 줄에 중단점을 설정합니다.
  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} 요청한 첫 번째 페이지에서 로드하는 구성 요소의 수명 주기 메서드 에 중단점이 포함됩니다.

IDE에서 Blazor Server 앱 디버깅

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

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

IDE에서 Blazor WebAssembly 앱 디버깅

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

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

IDE에서 호스트 Blazor WebAssembly 된 앱 디버그

  1. Server에서 프로젝트를 선택한 상태로 F5를 눌러 디버거에서 앱을 실행하세요.

    Google Chrome 또는 Microsoft Edge와 같은 Chromium 기반 브라우저로 디버그할 때 사용자의 프로필을 사용하여 기존 브라우저 창에서 탭을 여는 대신 디버깅 세션에 대한 별도의 프로필로 새 브라우저 창이 열릴 수 있습니다. 사용자의 프로필을 사용한 디버깅이 필요한 경우 다음 접근 방식 중 한 가지를 채택합니다.

    • F5 키를 눌러 디버깅을 시작하기 전에 열려 있는 모든 브라우저 인스턴스를 닫습니다.
    • 사용자 프로필을 사용하여 브라우저를 시작하도록 Visual Studio를 구성합니다. 이 접근 방식에 대한 자세한 내용은 Blazor WASM Debugging in VS launches Edge with a separate user data directory (dotnet/aspnetcore #20915)(VS에서 Blazor WASM을 디버그하면 별도의 사용자 데이터 디렉터리를 사용하여 Edge가 시작됨(dotnet/aspnetcore #20915))를 참조하세요.

  2. Client 프로젝트에서 구성 요소(currentCount++;)의 Counter 줄에 Pages/Counter.razor 중단점을 설정합니다.

  3. 브라우저에서 Counter에 있는 /counter 페이지로 이동합니다. 디버그 프록시가 로드되고 실행되기까지 몇 초 정도 기다립니다. 클릭하기 단추를 선택하여 중단점을 누릅니다.

  4. Visual Studio에서 currentCount 창의 필드 값을 확인합니다.

  5. F5 키를 눌러 실행을 계속합니다.

프로젝트에서 서버 코드를 디버그할 수도 있습니다.Server

  1. Pages/FetchData.razor의 OnInitializedAsync 페이지에서 중단점을 설정합니다.
  2. WeatherForecastController 작업 메서드의 Get에 중단점을 설정합니다.
  3. Fetch Data 페이지로 이동하여 FetchData 구성 요소가 서버에 HTTP 요청을 보내기 직전에 첫 번째 중단점을 적중시킵니다.
  4. F5 키를 눌러 실행을 계속하고 서버에서 WeatherForecastController의 중단점을 적중시킵니다.
  5. F5 키를 다시 눌러 실행이 계속되도록 하고 브라우저에서 날씨 예측 테이블이 렌더링되는지 확인합니다.

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

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

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

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

Visual Studio Code 시작 옵션

다음 표에 있는 실행 구성 옵션은 blazorwasm 디버그 유형(.vscode/launch.json)에서 지원됩니다.

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

다음 표의 추가 옵션은 호스트된 Blazor WebAssembly 앱에만 적용됩니다.

옵션 설명
env 시작된 프로세스에 제공할 환경 변수입니다. hosted가 true로 설정된 경우에만 적용됩니다.
hosted 호스트된 true 앱을 시작하고 디버그하는 경우 Blazor WebAssembly로 설정해야 합니다.
program 호스트된 앱의 서버를 실행하는 실행 파일에 대한 참조입니다. hosted가 true일 경우 설정해야 합니다.

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

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

  • Windows 또는 macOS에서 실행되는 Google Chrome.
  • Microsoft EdgeWindows에서 실행됩니다.

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

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

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

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

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

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

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

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

    참고

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

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

  5. file:// 노드를 엽니다. 구성 요소 코드(.razor 파일) 및 C# 코드 파일(.cs)에서는 앱의 브라우저 탭(원격 디버깅을 시작한 후 열린 초기 탭)에서 코드가 실행될 때 설정한 중단점이 적중됩니다. 중단점에 도달하면 디버깅 탭에서 코드를 한 단계씩 실행하거나(F10) 코드 실행을 정상적으로 재개할 수 있습니다(F8).

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

처리되지 않은 예외 발생 시 중단

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

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

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

브라우저 소스 맵

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

방화벽 구성

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

경고

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

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

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

가능하면 신뢰할 수 있거나 비공개 네트워크에서 NodeJS 프로세스와의 통신만 허용하세요.

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

문제 해결

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

  • 중단점 제거:
    • Google Chrome: 디버거 탭에서 브라우저에서 개발자 도구를 엽니다. 콘솔에서 localStorage.clear()를 실행하여 중단점을 모두 제거합니다.
    • Microsoft Edge: 애플리케이션 탭에서 로컬 스토리지를 엽니다. 사이트를 마우스 오른쪽 단추로 클릭하고 지우기를 선택합니다.
  • ASP.NET Core HTTPS 개발 인증서를 설치하고 신뢰할 수 있는지 확인합니다. 자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.
  • Visual Studio에서는 도구>>>의 ASP.NET(JavaScript 디버깅 사용(Chrome 및 Edge)) 옵션을 사용하도록 설정해야 합니다. 이것은 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으로 할당됩니다.

핫 리로드 제어

MSBuild 속성은 WasmEnableHotReload를 사용할 수 있도록 하며, 구성에서 빌드할 때 기본적으로 true로 설정됩니다. 다른 구성에서 빌드할 때 핫 다시 로드를 사용할 수 없습니다(설정 false).

사용자 지정 구성 이름을 사용하여 디버깅하려면, 예를 들어 DebugWebAssembly에서, 핫 리로드를 사용하도록 속성을 true로 설정하세요.

<PropertyGroup>
  <WasmEnableHotReload>true</WasmEnableHotReload>
</PropertyGroup>

핫 리로드 기능을 Debug 구성에 대해 비활성화하려면 해당 값을 false로 설정하십시오.

<PropertyGroup>
  <WasmEnableHotReload>false</WasmEnableHotReload>
</PropertyGroup>
  • Last updated on