ASP.NET Core Blazor Hybrid에서 브라우저 개발자 도구 사용

참고

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

경고

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

이 문서에서는 브라우저 개발자 도구를 Blazor Hybrid 앱과 함께 사용하는 방법을 설명합니다.

.NET MAUI Blazor에서의 브라우저 개발자 도구

Blazor Hybrid 프로젝트가 브라우저 개발자 도구를 지원하도록 구성되어 있는지 확인합니다. 앱에서 AddBlazorWebViewDeveloperTools를 검색하여 개발자 도구 지원을 확인할 수 있습니다.

프로젝트가 아직 브라우저 개발자 도구에 대해 구성되지 않은 경우 다음과 같이 지원을 추가합니다.

1. AddMauiBlazorWebView에 대한 호출이 이루어지는 위치를 찾습니다(예: 앱의 MauiProgram.cs 파일 내부).

2. MauiProgram.cs 파일 맨 위에서, using에 대한 Microsoft.Extensions.Logging 문이 있는지 확인합니다. using 문이 없으면, 파일 맨 위에 추가합니다.

   using Microsoft.Extensions.Logging;
   

3. AddMauiBlazorWebView에 대한 호출 뒤에 다음 코드를 추가합니다.

   #if DEBUG
       builder.Services.AddBlazorWebViewDeveloperTools();
       builder.Logging.AddDebug();
   #endif
   

Windows 앱에서 브라우저 개발자 도구를 사용하려면:

1. Windows용 .NET MAUIBlazor Hybrid 앱을 실행하고 BlazorWebView를 사용하는 앱 페이지로 이동합니다. 개발자 도구 콘솔은 ContentPages에서 BlazorWeb View 없이 사용할 수 없습니다.

2. 바로 가기 키 Ctrl+Shift+I를 사용하여 브라우저 개발자 도구를 엽니다.

3. 개발자 도구는 페이지에서 요청한 자산, 자산을 로드하는 데 걸린 시간, 로드된 자산의 콘텐츠를 비롯한 앱 작업을 위한 다양한 기능을 제공합니다. 다음 예제는 콘솔 메시지를 볼 수 있는 콘솔 탭을 보여 주며, 콘솔 탭에는 프레임워크 또는 개발자 코드에서 생성된 예외 메시지가 포함되어 있습니다.

   

Android 앱에서 브라우저 개발자 도구를 사용하려면:

1. Android 에뮬레이터를 시작하고 BlazorWebView를 사용하는 앱 페이지로 이동합니다. 개발자 도구 콘솔은 ContentPages에서 BlazorWeb View 없이 사용할 수 없습니다.

2. Google Chrome 또는 Microsoft Edge를 엽니다.

3. chrome://inspect/#devices(Google Chrome) 또는 edge://inspect/#devices(Microsoft Edge)로 이동합니다.

4. inspect 링크 단추를 선택하여 개발자 도구를 엽니다. 다음 예제는 Microsoft Edge에서의 DevTools 페이지를 보여 줍니다.

   

5. 개발자 도구는 페이지에서 요청한 자산, 자산을 로드하는 데 걸린 시간, 로드된 자산의 콘텐츠를 비롯한 앱 작업을 위한 다양한 기능을 제공합니다. 다음 예제는 콘솔 메시지를 볼 수 있는 콘솔 탭을 보여 주며, 콘솔 탭에는 프레임워크 또는 개발자 코드에서 생성된 예외 메시지가 포함되어 있습니다.

   

iOS 앱에서 Safari 개발자 도구를 사용하려면:

1. 데스크톱 Safari를 엽니다.

2. 메뉴 모음에서 Safari>기본 설정>고급>개발 표시 메뉴를 선택합니다.

3. iOS 시뮬레이터에서 .NET MAUIBlazor Hybrid 앱을 실행하고 BlazorWebView를 사용하는 앱 페이지로 이동합니다. 개발자 도구 콘솔은 ContentPages에서 BlazorWeb View 없이 사용할 수 없습니다.

4. Safari로 돌아갑니다. 개발>{REMOTE INSPECTION TARGET}>0.0.0.0을 선택합니다. 여기서 {REMOTE INSPECTION TARGET} 자리 표시자는 디바이스의 일반 이름(예: MacBook Pro) 또는 디바이스의 일련 번호(예: XMVM7VFF10)입니다. 0.0.0.0에 대한 여러 항목이 있는 경우 BlazorWebView가 강조 표시된 항목을 선택합니다. 올바른 BlazorWebView 항목을 선택하면 가 iOS 시뮬레이터에서 파란색으로 강조 표시됩니다.

   Safari 개발 시뮬레이터가 열려 "0.0.0.0"에 대한 두 개의 항목을 보여주고 있으며, 두 번째 항목이 선택되어 Visual Studio 에뮬레이터 UI에서 BlazorWebView를 강조 표시합니다.

5. 웹 검사기 창이 BlazorWebView에 나타납니다.

6. 개발자 도구는 페이지에서 요청한 자산, 자산을 로드하는 데 걸린 시간, 로드된 자산의 콘텐츠를 비롯한 앱 작업을 위한 다양한 기능을 제공합니다. 다음 예제는 콘솔 탭을 보여 주며, 콘솔 탭에는 프레임워크 또는 개발자 코드에서 생성된 예외 메시지가 포함되어 있습니다.

   

com.apple.security.get-task-allow 형식의 Boolean 키를 디버그 빌드에 대한 앱의 권한 파일에 추가합니다.

com.apple.security.get-task-allow 키가 있는 권한 파일을 추가하려면, 프로젝트의 Entitlements.Debug.plist 폴더에 Platforms/MacCatalyst로 명명된 다음 XML 파일을 추가합니다.

Platforms/MacCatalyst/Entitlements.Debug.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

Mac Catalyst에서 빌드를 디버그하기 위해 권한 파일을 사용하려면, 다음 <PropertyGroup> 노드를 앱의 프로젝트 파일에 <Project> 노드의 자식으로 추가합니다.

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

macOS 앱에서 Safari 개발자 도구를 사용하려면 다음을 수행합니다.

1. 데스크톱 Safari를 엽니다.

2. 메뉴 모음에서 Safari>기본 설정>고급>개발 표시 메뉴를 선택합니다.

3. macOS에서 .NET MAUIBlazor Hybrid 앱을 실행합니다.

4. Safari로 돌아갑니다. 개발>{REMOTE INSPECTION TARGET}>0.0.0.0을 선택합니다. 여기서 {REMOTE INSPECTION TARGET} 자리 표시자는 디바이스의 일반 이름(예: MacBook Pro) 또는 디바이스의 일련 번호(예: XMVM7VFF10)입니다. 0.0.0.0에 대한 여러 항목이 있는 경우 BlazorWebView가 강조 표시된 항목을 선택합니다. 올바른 BlazorWebView 항목을 선택하면 해당 항목은 macOS에서 파란색으로 강조 표시됩니다.

5. 웹 검사기 창이 BlazorWebView에 나타납니다.

6. 개발자 도구는 페이지에서 요청한 자산, 자산을 로드하는 데 걸린 시간, 로드된 자산의 콘텐츠를 비롯한 앱 작업을 위한 다양한 기능을 제공합니다. 다음 예제는 콘솔 탭을 보여 주며, 콘솔 탭에는 프레임워크 또는 개발자 코드에서 생성된 예외 메시지가 포함되어 있습니다.

   

관련 콘텐츠

• Chrome DevTools
• Microsoft Edge 개발자 도구 개요
• Safari 개발자 도움말
• Mac Catalyst에서 BlazorWebView 검사하기 (13.1 이전의 Mac Catalyst 및 16.4 이전의 iOS)