Udostępnij za pośrednictwem

Korzystanie z narzędzi deweloperskich przeglądarki z platformą ASP.NET Core Blazor Hybrid

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

Ostrzeżenie

Ta wersja ASP.NET Core nie jest już obsługiwana. Aby uzyskać więcej informacji, zobacz zasady pomocy technicznej platformy .NET i platformy .NET Core. Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

W tym artykule wyjaśniono, jak używać narzędzi deweloperskich przeglądarki z aplikacjami Blazor Hybrid .

Narzędzia deweloperskie przeglądarki z .NET MAUIBlazor

Upewnij się, Blazor Hybrid że projekt jest skonfigurowany do obsługi narzędzi deweloperskich przeglądarki. Możesz potwierdzić obsługę narzędzi deweloperskich, wyszukując aplikację pod kątem AddBlazorWebViewDeveloperTools.

Jeśli projekt nie został jeszcze skonfigurowany dla narzędzi deweloperskich przeglądarki, dodaj obsługę przez:

  1. Lokalizowanie lokalizacji, do której jest wykonywane wywołanie AddMauiBlazorWebView , prawdopodobnie w pliku aplikacji MauiProgram.cs .

  2. W górnej MauiProgram.cs części pliku potwierdź obecność instrukcji using dla Microsoft.Extensions.Loggingelementu . using Jeśli instrukcja nie jest obecna, dodaj ją na początku pliku:

    using Microsoft.Extensions.Logging;

  3. Po wywołaniu metody AddMauiBlazorWebViewdodaj następujący kod:

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

Aby użyć narzędzi deweloperskich przeglądarki z aplikacją systemu Windows:

  1. Uruchom aplikację .NET MAUIBlazor Hybrid dla systemu Windows i przejdź do strony aplikacji korzystającej z elementu BlazorWebView. Konsola narzędzi deweloperskich jest niedostępna z ContentPageprogramu s bez elementu BlazorWeb View.

  2. Użyj skrótu klawiaturowego Ctrl+Shift+I, aby otworzyć narzędzia deweloperskie przeglądarki.

  3. Narzędzia programistyczne udostępniają różne funkcje do pracy z aplikacjami, w tym zasoby żądane przez stronę, czas ładowania zasobów oraz zawartość załadowanych zasobów. W poniższym przykładzie pokazano kartę Konsola , aby wyświetlić komunikaty konsoli, w tym komunikaty o wyjątkach generowane przez strukturę lub kod dewelopera:

    Okno Microsoft Edge DevTools dla aplikacji uruchomionej Blazor Hybrid w systemie Windows

Aby użyć narzędzi deweloperskich przeglądarki z aplikacją systemu Android:

  1. Uruchom emulator systemu Android i przejdź do strony aplikacji korzystającej z elementu BlazorWebView. Konsola narzędzi deweloperskich jest niedostępna z ContentPageprogramu s bez elementu BlazorWeb View.

  2. Otwórz przeglądarkę Google Chrome lub Microsoft Edge.

  3. Przejdź do chrome://inspect/#devices (Google Chrome) lub edge://inspect/#devices (Microsoft Edge).

  4. Wybierz przycisk linku, inspect aby otworzyć narzędzia deweloperskie. Poniższy przykład przedstawia stronę DevTools w przeglądarce Microsoft Edge:

    Urządzenia przeglądarki Microsoft Edge z przyciskiem linku

  5. Narzędzia programistyczne udostępniają różne funkcje do pracy z aplikacjami, w tym zasoby żądane przez stronę, czas ładowania zasobów oraz zawartość załadowanych zasobów. W poniższym przykładzie pokazano kartę Konsola , aby wyświetlić komunikaty konsoli, w tym komunikaty o wyjątkach generowane przez strukturę lub kod dewelopera:

    Okno Microsoft Edge DevTools dla Blazor Hybrid aplikacji uruchomionej w emulowanym pikselu 5

Aby użyć narzędzi deweloperskich Safari z aplikacją systemu iOS:

  1. Otwórz przeglądarkę Safari dla komputerów stacjonarnych.

  2. Zaznacz menu Menu Zaawansowane>Pokaż programowanie w preferencjach>Przeglądarki Safari>w pasku menu.

  3. Uruchom aplikację .NET MAUIBlazor Hybrid w symulatorze systemu iOS i przejdź do strony aplikacji korzystającej z elementu BlazorWebView. Konsola narzędzi deweloperskich jest niedostępna z ContentPageprogramu s bez elementu BlazorWeb View.

  4. Wróć do programu Safari. Wybierz pozycję Develop>{REMOTE INSPECTION TARGET}>0.0.0.0, gdzie {REMOTE INSPECTION TARGET} symbol zastępczy to zwykła nazwa urządzenia (na przykład MacBook Pro) lub numer seryjny urządzenia (na przykład ).XMVM7VFF10 Jeśli istnieje wiele wpisów dla wersji 0.0.0.0 , wybierz wpis, który wyróżnia BlazorWebViewelement . Element BlazorWebView jest wyróżniony na niebiesko w symulatorze systemu iOS po wybraniu poprawnego wpisu 0.0.0.0 .

    Otwieranie symulatora programowania w przeglądarce Safari z wyświetlonymi dwoma wpisami dla elementu

  5. Zostanie wyświetlone okno Inspektor sieci Web dla elementu BlazorWebView.

  6. Narzędzia programistyczne udostępniają różne funkcje do pracy z aplikacjami, w tym zasoby żądane przez stronę, czas ładowania zasobów oraz zawartość załadowanych zasobów. W poniższym przykładzie przedstawiono kartę Konsola , która zawiera wszelkie komunikaty o wyjątkach wygenerowane przez strukturę lub kod dewelopera:

    Safari Web Inspector and Simulator windows for a app running on an emulated iPad mini (Safari Web Inspector and Simulator windows for a Blazor Hybrid app running on an emulated iPad mini)

com.apple.security.get-task-allow Dodaj klucz typu Boolean, do pliku uprawnień aplikacji na potrzeby kompilacji debugowania.

Aby dodać plik uprawnień z kluczem com.apple.security.get-task-allow , dodaj następujący plik XML o nazwie Entitlements.Debug.plist do Platforms/MacCatalyst folderu projektu.

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>

Aby użyć pliku uprawnień do debugowania kompilacji w systemie Mac Catalyst, dodaj następujący <PropertyGroup> węzeł do pliku projektu aplikacji jako element podrzędny węzła <Project> :

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

Aby użyć narzędzi deweloperskich Safari z aplikacją systemu macOS:

  1. Otwórz przeglądarkę Safari dla komputerów stacjonarnych.

  2. Zaznacz menu Menu Zaawansowane>Pokaż programowanie w preferencjach>Przeglądarki Safari>w pasku menu.

  3. Uruchom aplikację .NET MAUIBlazor Hybrid w systemie macOS.

  4. Wróć do programu Safari. Wybierz pozycję Develop>{REMOTE INSPECTION TARGET}>0.0.0.0, gdzie {REMOTE INSPECTION TARGET} symbol zastępczy to zwykła nazwa urządzenia (na przykład MacBook Pro) lub numer seryjny urządzenia (na przykład ).XMVM7VFF10 Jeśli istnieje wiele wpisów dla wersji 0.0.0.0 , wybierz wpis, który wyróżnia BlazorWebViewelement . Po BlazorWebView wybraniu poprawnego wpisu 0.0.0.0.0 wyróżniono kolor niebieski w systemie macOS.

  5. Zostanie wyświetlone okno Inspektor sieci Web dla elementu BlazorWebView.

  6. Narzędzia programistyczne udostępniają różne funkcje do pracy z aplikacjami, w tym zasoby żądane przez stronę, czas ładowania zasobów oraz zawartość załadowanych zasobów. W poniższym przykładzie przedstawiono kartę Konsola , która zawiera wszelkie komunikaty o wyjątkach wygenerowane przez strukturę lub kod dewelopera:

    Safari Web Inspector dla Blazor Hybrid aplikacji

Dodatkowe zasoby