debugging.md

디버깅

노트: Blazor는 아직 기술 지원이 제공되지 않는 실험용 웹 프레임워크로, 실무 개발에 사용되어서는 안됩니다.

Blazor는 Chrome에서 WebAssembly로 실행되는 클라이언트 측 Blazor 앱에 대한 매우 초기 단계의 디버깅을 일부 지원합니다. 매우 제한적이고 다듬어지지 않은 초창기 수준의 디버깅 지원이지만, 기본적인 디버깅 인프라가 같이 개발되고 있습니다.

Chrome에서 클라이언트 측 Blazor 앱을 디버깅하려면:

• Debug 빌드 구성 (게시되지 않은 앱의 기본 구성)으로 Blazor 앱을 빌드합니다.
• Blazor 앱을 Chrome에서 실행합니다.
• 앱에 키보드 포커스를 둔 상태에서 (개발자 도구 패널이 아닙니다. 햇갈리지 않도록 개발자 도구 패널은 닫으시는 것을 권합니다.), 다음의 Blazor 디버깅 전용 키보드 단축 키를 누릅니다:
  • Windows와 Linux에서는 Shift+Alt+D 키를 누릅니다.
  • macOS에서는 Shift+Cmd+D 키를 누릅니다.

Blazor 앱을 디버깅하려면 Chrome을 원격 디버깅을 활성화한 상태에서 실행합니다. 만약 원격 디버깅이 비활성화되어있으면, Chrome이 오류 페이지를 생성합니다. 오류 페이지에는 Chrome이 디버깅 포트를 연 상태에서 실행하도록 하기 위한 방법이 포함되어있으며, 이를 통해 Blazor 디버깅 프록시가 앱에 연결할 수 있습니다. 안내되어있는대로 모든 Chrome 인스턴스들을 닫은 후 Chrome을 다시 시작합니다.

원격 디버깅을 활성화한 상태에서 Chrome을 실행하면, 디버깅 키보드 단축키가 새로운 디버거 탭을 엽니다. 잠시 후, Sources 탭에는 앱이 사용하는 모든 .NET 어셈블리들의 목록이 표시됩니다. 각 어셈블리를 열어, 사용 가능한 .cs|.cshtml 소스 파일들 중 디버깅하려는 파일을 찾습니다. 중단점을 설정하고, 앱의 탭으로 되돌아와서 중단점을 설정해둔 부분까지 실행합니다. 중단점을 만나면, 한 단계씩 실행 (F10) 하거나, 정상적으로 계속 실행 (F8) 합니다.

Blazor는 Chrome DevTools 프로토콜을 구현하는, .NET에 특화된 정보를 적절하게 융합하는 디버깅 프록시를 제공합니다. 디버깅 키보드 단축키가 눌러지면 Blazor는 Chrome DevTools를 프록시에서 가리킵니다. 프록시는 디버그하고자하는 브라우저 창에 연결합니다. (따라서 원격 디버깅을 활성화해야합니다.)

그런데 브라우저 소스 맵을 사용하지 않는 이유가 궁금하실 것입니다. 소스 맵은 브라우저가 컴파일된 파일과 원본 소스 파일 간의 관계를 알 수 있도록 해줍니다. 하지만, Blazor는 C#과 JS/WASM과 직접 맵핑하는 것을 (아직까지는) 지원하지 않습니다. 대신, Blazor는 IL 해석을 브라우저 내에서 처리하므로, 소스 맵과는 관계가 없습니다.

또한 디버거 기능은 매우 제한적입니다. 다음의 기능만을 사용할 수 있습니다:

• 실행 중인 메서드 안에서 한 단계씩 진행 (F10) 또는 계속 실행 (F8)하기
• 로컬 변수 디스플레이에서, int, string, 그리고 bool 형식의 변수에 대한 값 보기
• JavaScript에서 .NET으로 향하거나, .NET에서 JavaScript로 향하는 호출 과정을 포함하는 호출 스택 보기

할 수 없는 일 들은 다음과 같습니다:

• 자식 메서드로 진입하여 실행하기 (F11)
• int, string, 또는 bool 형식이 아닌 다른 모든 형식의 로컬 변수 값 보기
• 클래스 속성이나 필드의 값 보기
• 값을 보기 위하여 변수 위로 마우스 커서 가져가기
• 콘솔에서 식 평가하기
• 비동기 호출 간 전환하기
• 보통의 디버깅 시나리오에서 지원하는 대부분의 기능들

더 많은 디버깅 시나리오의 개발은 엔지니어링 팀이 현재 계속 작업하고 있습니다.

문제 해결 팁

만약 오류가 발생하는 경우, 아래 내용이 도움이 될 수 있습니다:

디버거 탭에서, 브라우저의 개발자 도구를 엽니다. 콘솔에서, localStorage.clear() 를 실행하여 모든 중단점을 제거합니다.