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

아티클
11/12/2024

참고 항목

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

Warning

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

Important

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

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

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

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

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

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

MauiProgram.cs에 대한 호출이 이루어지는 위치를 찾습니다(예: 앱의 AddMauiBlazorWebView 파일 내부).
MauiProgram.cs 파일 맨 위에서, Microsoft.Extensions.Logging에 대한 using 문이 있는지 확인합니다. using 문이 없으면, 파일 맨 위에 추가합니다.
```
using Microsoft.Extensions.Logging;
```

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

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

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

Windows용 .NET MAUIBlazor Hybrid 앱을 실행하고 BlazorWebView를 사용하는 앱 페이지로 이동합니다. 개발자 도구 콘솔은 s에서 ContentPage사용할 수 없습니다 BlazorWeb View.
바로 가기 키 Ctrl+Shift+I를 사용하여 브라우저 개발자 도구를 엽니다.
개발자 도구는 페이지에서 요청한 자산, 자산을 로드하는 데 걸린 시간, 로드된 자산의 콘텐츠를 비롯한 앱 작업을 위한 다양한 기능을 제공합니다. 다음 예제는 콘솔 메시지를 볼 수 있는 콘솔 탭을 보여 주며, 콘솔 탭에는 프레임워크 또는 개발자 코드에서 생성된 예외 메시지가 포함되어 있습니다.

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

Android 에뮬레이터를 시작하고 BlazorWebView를 사용하는 앱 페이지로 이동합니다. 개발자 도구 콘솔은 s에서 ContentPage사용할 수 없습니다 BlazorWeb View.
Google Chrome 또는 Microsoft Edge를 엽니다.
chrome://inspect/#devices(Google Chrome) 또는 edge://inspect/#devices(Microsoft Edge)로 이동합니다.
inspect 링크 단추를 선택하여 개발자 도구를 엽니다. 다음 예제는 Microsoft Edge에서의 DevTools 페이지를 보여 줍니다.
개발자 도구는 페이지에서 요청한 자산, 자산을 로드하는 데 걸린 시간, 로드된 자산의 콘텐츠를 비롯한 앱 작업을 위한 다양한 기능을 제공합니다. 다음 예제는 콘솔 메시지를 볼 수 있는 콘솔 탭을 보여 주며, 콘솔 탭에는 프레임워크 또는 개발자 코드에서 생성된 예외 메시지가 포함되어 있습니다.

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

데스크톱 Safari를 엽니다.
메뉴 모음에서 Safari>기본 설정>고급>개발 표시 메뉴를 선택합니다.
iOS 시뮬레이터에서 .NET MAUIBlazor Hybrid 앱을 실행하고 BlazorWebView를 사용하는 앱 페이지로 이동합니다. 개발자 도구 콘솔은 s에서 ContentPage사용할 수 없습니다 BlazorWeb View.
Safari로 돌아갑니다. 개발>{REMOTE INSPECTION TARGET}>0.0.0.0을 선택합니다. 여기서 {REMOTE INSPECTION TARGET} 자리 표시자는 디바이스의 일반 이름(예: MacBook Pro) 또는 디바이스의 일련 번호(예: XMVM7VFF10)입니다. 0.0.0.0에 대한 여러 항목이 있는 경우 BlazorWebView가 강조 표시된 항목을 선택합니다. 올바른 0.0.0.0 항목을 선택하면 BlazorWebView가 iOS 시뮬레이터에서 파란색으로 강조 표시됩니다.
BlazorWebView에 대한 웹 속성 창이 나타납니다.
개발자 도구는 페이지에서 요청한 자산, 자산을 로드하는 데 걸린 시간, 로드된 자산의 콘텐츠를 비롯한 앱 작업을 위한 다양한 기능을 제공합니다. 다음 예제는 콘솔 탭을 보여 주며, 콘솔 탭에는 프레임워크 또는 개발자 코드에서 생성된 예외 메시지가 포함되어 있습니다.

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

com.apple.security.get-task-allow 키가 있는 권한 파일을 추가하려면, 프로젝트의 Platforms/MacCatalyst 폴더에 Entitlements.Debug.plist로 명명된 다음 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 개발자 도구를 사용하려면 다음을 수행합니다.

데스크톱 Safari를 엽니다.
메뉴 모음에서 Safari>기본 설정>고급>개발 표시 메뉴를 선택합니다.
macOS에서 .NET MAUIBlazor Hybrid 앱을 실행합니다.
Safari로 돌아갑니다. 개발>{REMOTE INSPECTION TARGET}>0.0.0.0을 선택합니다. 여기서 {REMOTE INSPECTION TARGET} 자리 표시자는 디바이스의 일반 이름(예: MacBook Pro) 또는 디바이스의 일련 번호(예: XMVM7VFF10)입니다. 0.0.0.0에 대한 여러 항목이 있는 경우 BlazorWebView가 강조 표시된 항목을 선택합니다. 올바른 0.0.0.0 항목을 선택하면 BlazorWebView가 macOS에서 파란색으로 강조 표시됩니다.
BlazorWebView에 대한 웹 속성 창이 나타납니다.
개발자 도구는 페이지에서 요청한 자산, 자산을 로드하는 데 걸린 시간, 로드된 자산의 콘텐츠를 비롯한 앱 작업을 위한 다양한 기능을 제공합니다. 다음 예제는 콘솔 탭을 보여 주며, 콘솔 탭에는 프레임워크 또는 개발자 코드에서 생성된 예외 메시지가 포함되어 있습니다.

다음을 통해 공유

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

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

추가 리소스

추가 리소스