Sdílet prostřednictvím

Použití vývojářských nástrojů prohlížeče s ASP.NET Core Blazor Hybrid

  • Článek

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v tématu .NET a .NET Core Zásady podpory. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Tento článek vysvětluje, jak používat vývojářské nástroje prohlížeče s aplikacemi Blazor Hybrid .

Vývojářské nástroje prohlížeče s využitím .NET MAUIBlazor

Ujistěte se, Blazor Hybrid že je projekt nakonfigurovaný tak, aby podporoval vývojářské nástroje prohlížeče. Podporu vývojářských nástrojů můžete potvrdit vyhledáním aplikace AddBlazorWebViewDeveloperTools.

Pokud projekt ještě není nakonfigurovaný pro vývojářské nástroje prohlížeče, přidejte podporu:

  1. Umístění, kam se má volat AddMauiBlazorWebView , pravděpodobně v souboru aplikace MauiProgram.cs .

  2. V horní části MauiProgram.cs souboru potvrďte přítomnost using příkazu pro Microsoft.Extensions.Logging. using Pokud příkaz není k dispozici, přidejte ho do horní části souboru:

    using Microsoft.Extensions.Logging;

  3. Po volání AddMauiBlazorWebViewpřidejte následující kód:

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

Použití vývojářských nástrojů prohlížeče s aplikací pro Windows:

  1. .NET MAUIBlazor Hybrid Spusťte aplikaci pro Windows a přejděte na stránku aplikace, která používá BlazorWebView. Konzola vývojářských nástrojů není k dispozici bez ContentPagenástroje BlazorWeb View.

  2. K otevření vývojářských nástrojů prohlížeče použijte klávesovou zkratku Ctrl+Shift+I.

  3. Vývojářské nástroje poskytují řadu funkcí pro práci s aplikacemi, včetně prostředků, které stránka požadovala, jak dlouho trvalo načtení prostředků a obsah načtených prostředků. Následující příklad ukazuje kartu Konzola pro zobrazení zpráv konzoly, které zahrnují všechny zprávy o výjimce vygenerované architekturou nebo kódem vývojáře:

    Okno Microsoft Edge DevTools pro Blazor Hybrid aplikaci běžící ve Windows

Použití vývojářských nástrojů prohlížeče s aplikací pro Android:

  1. Spusťte emulátor Androidu a přejděte na stránku aplikace, která používá BlazorWebView. Konzola vývojářských nástrojů není k dispozici bez ContentPagenástroje BlazorWeb View.

  2. Otevřete Google Chrome nebo Microsoft Edge.

  3. Přejděte na chrome://inspect/#devices (Google Chrome) nebo edge://inspect/#devices (Microsoft Edge).

  4. inspect Výběrem tlačítka odkazu otevřete vývojářské nástroje. Následující příklad ukazuje stránku DevTools v Microsoft Edgi:

    Zařízení Microsoft Edge zobrazující tlačítko

  5. Vývojářské nástroje poskytují řadu funkcí pro práci s aplikacemi, včetně prostředků, které stránka požadovala, jak dlouho trvalo načtení prostředků a obsah načtených prostředků. Následující příklad ukazuje kartu Konzola pro zobrazení zpráv konzoly, které zahrnují všechny zprávy o výjimce vygenerované architekturou nebo kódem vývojáře:

    Okno Microsoft Edge DevTools pro Blazor Hybrid aplikaci spuštěnou na emulovaném pixelu 5

Použití vývojářských nástrojů Safari s aplikací pro iOS:

  1. Otevřete desktopový Safari.

  2. V řádku nabídek zaškrtněte políčko Upřesnit zobrazení nabídky Pro>vývoj v předvolbách>Safari.>

  3. .NET MAUIBlazor Hybrid Spusťte aplikaci v simulátoru iOS a přejděte na stránku aplikace, která používá BlazorWebView. Konzola vývojářských nástrojů není k dispozici bez ContentPagenástroje BlazorWeb View.

  4. Vraťte se do prohlížeče Safari. Vyberte Možnost Vývoj>{CÍL VZDÁLENÉ KONTROLY}>0.0.0.0, kde {REMOTE INSPECTION TARGET} zástupný symbol je prostý název zařízení (napříkladMacBook Pro) nebo sériové číslo zařízení (například).XMVM7VFF10 Pokud je k dispozici více položek pro 0.0.0.0 , vyberte položku, která zvýrazní BlazorWebViewpoložku . Když BlazorWebView je vybrána správná položka 0.0.0.0,0 , je v simulátoru iOS zvýrazněná modře.

    Safari Develop Simulator open showing two entry for

  5. Zobrazí se okno webového inspektoru pro aplikaci BlazorWebView.

  6. Vývojářské nástroje poskytují řadu funkcí pro práci s aplikacemi, včetně prostředků, které stránka požadovala, jak dlouho trvalo načtení prostředků a obsah načtených prostředků. Následující příklad ukazuje kartu Konzola , která obsahuje všechny zprávy o výjimce vygenerované architekturou nebo kódem vývojáře:

    Okna Webového inspektoru Safari a simulátoru Blazor Hybrid pro aplikaci běžící na emulovaném iPadu mini

com.apple.security.get-task-allow Přidejte klíč typu Booleando souboru nároků aplikace pro jeho sestavení ladění.

Pokud chcete přidat soubor nároků s com.apple.security.get-task-allow klíčem, přidejte do složky projektu následující soubor XML s názvem Entitlements.Debug.plist Platforms/MacCatalyst .

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>

Pokud chcete využívat soubor nároků pro sestavení Mac Catalystladění, přidejte do souboru projektu aplikace následující <PropertyGroup> uzel jako podřízený uzel <Project> :

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

Použití vývojářských nástrojů Safari s aplikací pro macOS:

  1. Otevřete desktopový Safari.

  2. V řádku nabídek zaškrtněte políčko Upřesnit zobrazení nabídky Pro>vývoj v předvolbách>Safari.>

  3. .NET MAUIBlazor Hybrid Spusťte aplikaci v macOS.

  4. Vraťte se do prohlížeče Safari. Vyberte Možnost Vývoj>{CÍL VZDÁLENÉ KONTROLY}>0.0.0.0, kde {REMOTE INSPECTION TARGET} zástupný symbol je prostý název zařízení (napříkladMacBook Pro) nebo sériové číslo zařízení (například).XMVM7VFF10 Pokud je k dispozici více položek pro 0.0.0.0 , vyberte položku, která zvýrazní BlazorWebViewpoložku . Když BlazorWebView je vybrána správná položka 0.0.0.0 , je v macOS zvýrazněná modře.

  5. Zobrazí se okno webového inspektoru pro aplikaci BlazorWebView.

  6. Vývojářské nástroje poskytují řadu funkcí pro práci s aplikacemi, včetně prostředků, které stránka požadovala, jak dlouho trvalo načtení prostředků a obsah načtených prostředků. Následující příklad ukazuje kartu Konzola , která obsahuje všechny zprávy o výjimce vygenerované architekturou nebo kódem vývojáře:

    Safari Web Inspector pro Blazor Hybrid aplikaci

Další materiály