ASP.NET Core 앱 디버그

참고 항목

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

Important

이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.

현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

이 문서에서는 브라우저 개발자 도구 또는 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 되지 않는 시나리오는 다음과 같습니다.

필수 조건

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

브라우저 필수 구성 요소

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

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

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

  • Google Chrome(기본값)
  • Microsoft Edge

방화벽 또는 프록시가 디버그 프록시(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의 디버깅 프록시를 통해 브라우저에 연결하도록 스크립트 디버깅 인프라에 지시합니다.

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

패키지

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.WebAssembly.DevServer앱을 빌드 Blazor 할 때 사용할 개발 서버입니다. 내부적으로 WebAssemblyNetDebugProxyAppBuilderExtensions.UseWebAssemblyDebugging을 호출하여 Chromium 개발자 도구 내에서 Blazor WebAssembly 앱을 디버깅하기 위한 미들웨어를 추가합니다.

호스팅된 Blazor WebAssembly:

참고 항목

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

IDE에서 Blazor 웹앱 디버그

이 섹션의 예제에서는 자동(서버 및 WebAssembly)의 대화형 렌더링 모드와 구성 요소별 대화형 대화형 위치를 사용하여 웹앱을 만들었다고 Blazor 가정합니다.

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

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

  1. 디버거를 중지합니다.

  2. 서버 앱에 다음 구성 요소를 추가합니다. 구성 요소는 대화형 서버 렌더링 모드()를InteractiveServer 적용합니다.

    Components/Pages/Counter2.razor:

    @page "/counter-2"
    @rendermode InteractiveServer
    
    <PageTitle>Counter 2</PageTitle>
    
    <h1>Counter 2</h1>
    
    <p role="status">Current count: @currentCount</p>
    
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
    
    @code {
        private int currentCount = 0;
    
        private void IncrementCount()
        {
            currentCount++;
        }
    }
    
  3. 구성 요소의 줄 Counter2currentCount++; 중단점을 설정합니다.

  4. F5 키를 눌러 디버거에서 앱을 실행합니다.

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

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

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

IDE에서 앱 디버그 Blazor Server

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

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

IDE에서 앱 디버그 Blazor WebAssembly

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

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

디버거 지원

디버거 지원이 사용하도록 설정된 경우 런타임에 대해 디버깅이 사용하도록 설정 <DebuggerSupport>{VALUE}</DebuggerSupport>됩니다. 여기서 {VALUE} 자리 표시자 중 하나 true 또는 false.

기본적으로 프레임워크는 Blazor 디버그가 아닌 모든 구성에 대한 디버거 지원을 사용하지 않도록 설정합니다. 디버그가 아닌 구성에 대한 디버거 지원을 사용하도록 설정하려면 앱의 프로젝트 파일에 속성을 추가 <DebuggerSupport> 합니다.

다음 예제에서는 사용자 지정 "DebugCustom" 구성에 대해 디버거 지원을 사용하도록 설정합니다.

<DebuggerSupport Condition="'$(Configuration)' == 'DebugCustom'">true</DebuggerSupport>

자세한 내용은 사용자 지정 디버거 구성(dotnet/runtime#96239)을 참조 Blazor WebAssembly 하세요.

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 프로젝트에서 구성 요소(Pages/Counter.razor)의 currentCount++; 줄에 Counter 중단점을 설정합니다.

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

  4. Visual Studio에서 지역 창에 있는 currentCount 필드의 값을 검사합니다.

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

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

  1. OnInitializedAsyncPages/FetchData.razor 페이지에서 중단점을 설정합니다.
  2. Get 작업 메서드의 WeatherForecastController에 중단점을 설정합니다.
  3. Fetch Data 페이지로 이동하여 FetchData 구성 요소가 서버에 HTTP 요청을 보내기 직전에 첫 번째 중단점을 적중시킵니다.
  4. F5 키를 눌러 실행을 계속하고 서버에서 WeatherForecastController의 중단점을 적중시킵니다.
  5. 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 웹 서버의 절대 경로를 지정합니다. 하위 경로에서 앱이 제공되는 경우 설정해야 합니다.

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

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

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

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

  • Windows 또는 macOS에서 실행되는 Google Chrome.
  • Windows에서 실행되는 Microsoft Edge입니다.
  1. 를 사용하여 명령 셸 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 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으로 할당됩니다.