Ladění aplikací ASP.NET Core

Tento článek popisuje, jak ladit Blazor aplikace, včetně ladění Blazor WebAssembly aplikací pomocí vývojářských nástrojů prohlížeče nebo integrovaného vývojového prostředí (IDE).

Blazor Web Apps lze ladit v aplikaci Visual Studio nebo Visual Studio Code.

Blazor WebAssembly aplikace lze ladit:

• V aplikaci Visual Studio nebo Visual Studio Code.
• Použití vývojářských nástrojů prohlížeče v prohlížečích založených na Chromiu, včetně Microsoft Edge, Google Chrome a Firefoxu.

Mezi dostupné scénáře ladění Blazor WebAssembly patří:

• Nastavte a odeberte zarážky.
• Spusťte aplikaci s podporou ladění v prostředích IDEs.
• Jedním krokem v kódu.
• Pokračujte v provádění kódu pomocí klávesové zkratky v prostředích IDE.
• V okně Místní hodnoty sledujte hodnoty místních proměnných.
• Zobrazte si zásobník volání, včetně sekvencí volání mezi JavaScriptem a .NET.
• K ladění použijte server symbolů nakonfigurovaný v předvolbách sady Visual Studio.

Mezi nepodporované scénáře patří:

• Ladění v jiných než lokálních prostředích (například Subsystém Windows pro Linux (WSL) nebo Visual Studio Codespaces).
• Ladění ve Firefoxu ze sady Visual Studio nebo editoru Visual Studio Code

Požadavky

Tato část vysvětluje požadavky pro ladění.

Požadavky prohlížeče

Nejnovější verze následujících prohlížečů:

• Google Chrome
• Microsoft Edge
• Firefox (jenom vývojářské nástroje prohlížeče)

Ujistěte se, že brány firewall nebo proxy servery neblokují komunikaci s ladicím proxy serverem (NodeJS procesem). Další informace najdete v části Konfigurace brány firewall.

Poznámka:

Apple Safari v macOS se v současné době nepodporuje.

Požadavky integrovaného vývojového prostředí (IDE)

Vyžaduje se nejnovější verze sady Visual Studio nebo Visual Studio Code.

Požadavky pro Visual Studio Code

Visual Studio Code vyžaduje sadu C# Dev Kit pro Visual Studio Code (Začínáme s jazykem C# v editoru VS Code). Na Marketplace rozšíření editoru Visual Studio Code vyfiltrujte seznam rozšíření pomocí "c# dev kit" a vyhledejte rozšíření:

Instalace sady C# Dev Kit automaticky nainstaluje následující další rozšíření:

• Nástroj pro instalaci .NET
• C#
• IntelliCode for C# Dev Kit

Pokud narazíte na upozornění nebo chyby, můžete v repozitáři microsoft/vscode-dotnettools GitHubu nahlásit problém a popsat ho.

Požadavky na konfiguraci aplikace

Pokyny v této pododdílu platí pro ladění na straně klienta.

Properties/launchSettings.json Otevřete soubor spouštěného projektu. Ověřte přítomnost následující vlastnosti inspectUri v každém spouštěcím profilu uzlu profiles daného souboru. Pokud tato vlastnost není k dispozici, přidejte ji do každého profilu:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

Vlastnost inspectUri :

• Umožňuje integrovanému vývojovému prostředí (IDE) rozpoznat, že se jedná o aplikaci Blazor.
• Určuje infrastruktuře ladění skriptů, aby se k prohlížeči připojila přes ladicí proxy server Blazor.

Zástupné hodnoty pro protokol WebSocket (wsProtocol), hostitele (url.hostname), port (url.port) a URI inspektoru ve spuštěném prohlížeči (browserInspectUri) poskytuje framework.

Poznámka:

Při spuštění aplikace pomocí rozhraní příkazového řádku .NET se ve výchozím nastavení použije první spouštěcí profil v launchSettings.json, jehož commandName je Project. Chcete-li použít jiný profil (například https), použijte volbu -lp|--launch-profile u dotnet watch nebo dotnet run, nebo přesuňte preferovaný profil na začátek souboru.

Balíčky

Blazor Web Apps: Microsoft.AspNetCore.Components.WebAssembly.Server: Odkazuje na interní balíček (Microsoft.NETCore.BrowserDebugHost.Transport) pro assembly, které sdílejí hostitele ladění v prohlížeči.

Samostatný Blazor WebAssemblyserver: Microsoft.AspNetCore.Components.WebAssembly.DevServerVývojový server pro použití při vytváření Blazor WebAssembly aplikací. Volá interně UseWebAssemblyDebugging k přidání middlewaru pro ladění aplikací Blazor WebAssembly ve vývojářských nástrojích Chromium.

Poznámka:

Pokyny k přidávání balíčků do aplikací .NET najdete v článcích v části Instalace a správa balíčků na webu Pracovní postup používání balíčků (dokumentace k NuGetu). Ověřte správné verze balíčků na NuGet.org.

Ladění Blazor Web App v IDE

Visual Studio

Příklad v této části předpokládá, že jste vytvořili Blazor Web App s interaktivním režimem vykreslování Auto (Server a WebAssembly) a umístěním interaktivity pro jednotlivé komponenty.

1. Otevřete aplikaci.
2. Nastavte bod přerušení na řádku currentCount++; v komponentě Counter (Pages/Counter.razor) v klientském projektu (.Client).
3. Když je v Průzkumníku řešení vybraný projekt serveru, stiskněte F5 a spusťte aplikaci v ladicím režimu.
4. V prohlížeči přejděte na Counter stránku na adrese /counter. Počkejte několik sekund, než se proxy ladění načte a spustí. Kliknutím na tlačítko Klikněte sem dosáhnete bodu přerušení.
5. V aplikaci Visual Studio zkontrolujte hodnotu pole currentCount v okně Místní hodnoty.
6. Pokračujte v provádění stisknutím klávesy F5 .

Body přerušení lze také aktivovat v serverovém projektu ve staticky vykreslovaných a interaktivně vykreslovaných komponentách na straně serveru.

1. Zastavte ladicí program.
2. V serverové aplikaci otevřete staticky vykreslovanou Weather komponentu (Components/Pages/Weather.razor) a nastavte zarážku kdekoli v OnInitializedAsync metodě.
3. Stisknutím klávesy F5 spustíte aplikaci v ladicím programu.
4. V prohlížeči přejděte na Weather stránku na adrese /weather. Počkejte několik sekund, než se proxy ladění načte a spustí. Provádění aplikace se zastaví v bodě přerušení.
5. Pokračujte v provádění stisknutím klávesy F5 .

Body přerušení nejsou během spouštění aplikace zasaženy před spuštěním ladicí proxy. To zahrnuje zarážky v souboru a zarážkách v ProgramOnInitialized{Async} metodách životního cyklu komponent, které jsou načteny první stránkou požadovanou z aplikace.

Visual Studio Code

Příklad v této části předpokládá, že jste vytvořili Blazor Web App s interaktivním režimem vykreslování Auto (Server a WebAssembly) a umístěním interaktivity pro jednotlivé komponenty.

1. Otevřete aplikaci v editoru Visual Studio Code tak, že otevřete složku řešení, což je složka, která obsahuje složky serveru a .Client projektu.
2. Nastavte bod přerušení na řádku currentCount++; v komponentě Counter (Pages/Counter.razor) v klientském projektu (.Client).
3. Otevřete podokno Spustit a ladit a vyberte tlačítko Spustit a Ladit. Můžete také stisknout klávesu F5 (spustit ladění). C# V horní části uživatelského rozhraní vyberte ladicí program na paletě příkazů. Vyberte výchozí profil pro serverový projekt (například C#:BlazorSample [Default Configuration]).
4. V prohlížeči přejděte na Counter stránku na adrese /counter. Počkejte několik sekund, než se proxy ladění načte a spustí. Kliknutím na tlačítko Klikněte sem dosáhnete bodu přerušení.
5. V uživatelském rozhraní vyberte tlačítko Pokračovat nebo pokračujte v provádění stisknutím klávesy F5 (Pokračovat).

Bodů přerušení lze dosáhnout také v projektu serveru.

1. Ladění zastavíte tak, že vyberete tlačítko Zastavit nebo stisknete klávesu Shift+F5 na klávesnici.
2. V serverové aplikaci otevřete staticky vykreslovanou Weather komponentu (Components/Pages/Weather.razor) a nastavte zarážku kdekoli v OnInitializedAsync metodě.
3. Vyberte tlačítko Spustit ladění v uživatelském rozhraní nebo stisknutím klávesy F5 (Spustit ladění) spusťte aplikaci v ladicím programu.
4. V prohlížeči přejděte na Weather stránku na adrese /weather. Počkejte několik sekund, než se proxy ladění načte a spustí. Provádění aplikace se zastaví v bodě přerušení.
5. V uživatelském rozhraní vyberte tlačítko Pokračovat nebo pokračujte v provádění stisknutím klávesy F5 (Pokračovat).

Body přerušení nejsou během spouštění aplikace zasaženy před spuštěním ladicí proxy. To zahrnuje zarážky v souboru a zarážkách v ProgramOnInitialized{Async} metodách životního cyklu komponent, které jsou načteny první stránkou požadovanou z aplikace.

Ladění aplikace v integrovaném vývojovém Blazor WebAssembly prostředí

Visual Studio

1. Otevřete aplikaci.
2. Nastavte zarážku na currentCount++; řádku komponenty Counter (Pages/Counter.razor).
3. Stisknutím klávesy F5 spustíte aplikaci v ladicím programu.
4. V prohlížeči přejděte na Counter stránku na adrese /counter. Počkejte několik sekund, než se proxy ladění načte a spustí. Kliknutím na tlačítko Klikněte sem dosáhnete bodu přerušení.
5. V aplikaci Visual Studio zkontrolujte hodnotu pole currentCount v okně Místní hodnoty.
6. Pokračujte v provádění stisknutím klávesy F5 .

Body přerušení nejsou během spouštění aplikace zasaženy před spuštěním ladicí proxy. To zahrnuje zarážky v souboru a zarážkách v ProgramOnInitialized{Async} metodách životního cyklu komponent, které jsou načteny první stránkou požadovanou z aplikace.

Visual Studio Code

1. Otevřete složku aplikace v editoru Visual Studio Code.
2. Nastavte zarážku na currentCount++; řádku komponenty Counter (Pages/Counter.razor).
3. Otevřete podokno Spustit a ladit a vyberte tlačítko Spustit a Ladit. Můžete také stisknout klávesu F5 (spustit ladění). C# V horní části uživatelského rozhraní vyberte ladicí program na paletě příkazů. Vyberte výchozí profil (například C#:BlazorSample [Default Configuration]).
4. Stisknutím klávesy F5 spustíte aplikaci v ladicím programu.
5. Spustí se samostatná aplikace a otevře se prohlížeč pro ladění.
6. V prohlížeči přejděte na Counter stránku na adrese /counter. Počkejte několik sekund, než se proxy ladění načte a spustí. Kliknutím na tlačítko Klikněte sem dosáhnete bodu přerušení.
7. Pokračujte v provádění stisknutím klávesy F5 .

Body přerušení nejsou během spouštění aplikace zasaženy před spuštěním ladicí proxy. To zahrnuje zarážky v souboru a zarážkách v ProgramOnInitialized{Async} metodách životního cyklu komponent, které jsou načteny první stránkou požadovanou z aplikace.

Připojte se k existující relaci ladění v aplikaci Visual Studio Code

Pokud se chcete připojit ke spuštěné Blazor aplikaci, otevřete .vscode/launch.json soubor a nahraďte {URL} zástupný symbol adresou URL, ve které je aplikace spuštěná:

{
  "name": "Attach and Debug",
  "type": "blazorwasm",
  "request": "attach",
  "url": "{URL}"
}

Možnosti spuštění editoru Visual Studio Code

Možnosti konfigurace spuštění v následující tabulce jsou podporované pro blazorwasm typ ladění (.vscode/launch.json).

Možnost	Popis
browser	Prohlížeč, který se má spustit při ladění. Nastavte na edge nebo chrome. Výchozí hodnota je edge.
cwd	Pracovní adresář pro spuštění aplikace.
request	Pomocí launch spusťte a připojte ladicí relaci k aplikaci Blazor WebAssembly nebo pomocí attach připojte ladicí relaci k již spuštěné aplikaci.
timeout	Počet milisekund, po které se čeká na připojení relace ladění. Výchozí hodnota je 30 000 milisekund (30 sekund).
trace	Používá se k vygenerování protokolů z JS ladicího programu. Nastavte na true pro generování protokolů.
url	Adresa URL, která se má otevřít v prohlížeči při ladění.
webRoot	Určuje absolutní cestu webového serveru. Mělo by být nastaveno, pokud je aplikace poskytována z podcesty.

Ladění Blazor WebAssembly pomocí Google Chrome nebo Microsoft Edge

Pokyny v této části se týkají ladění Blazor WebAssembly aplikací v:

• Google Chromeběží ve Windows nebo macOS.
• Microsoft Edgeběžící na Windows.

1. Spusťte aplikaci v příkazovém prostředí s dotnet watch (nebo dotnet run).

2. Spusťte prohlížeč a přejděte na adresu URL aplikace.

3. Spusťte vzdálené ladění stisknutím:

   • Shift+Alt+d v systému Windows.
   • Shift+⌘+d v macOS.

   Prohlížeč musí běžet s povoleným vzdáleným laděním, což není výchozí nastavení. Pokud je vzdálené ladění zakázáno, zobrazí se chybová stránka Nelze najít laditelnou kartu prohlížeče s pokyny ke spuštění prohlížeče s otevřeným ladicím portem. Postupujte podle pokynů pro prohlížeč.

   Po provedení pokynů pro povolení vzdáleného ladění se aplikace otevře v novém okně prohlížeče. Spusťte vzdálené ladění stisknutím kombinace klávesy HotKey v novém okně prohlížeče:

   • Shift+Alt+d v systému Windows.
   • Shift+⌘+d v macOS.

   Otevře se nová karta prohlížeče v nástrojích pro vývojáře, která zobrazuje zesvětlený obraz aplikace.

   Poznámka:

   Pokud jste postupovali podle pokynů k otevření nové karty prohlížeče s povoleným vzdáleným laděním, můžete zavřít původní okno prohlížeče a nechat druhé okno otevřené, přičemž na první kartě poběží aplikace a na druhé debugger.

4. Po chvíli se na kartě Zdroje zobrazí seznam sestavení .NET a stránek aplikace.

5. Otevřete uzel file://. V kódu komponenty (.razor soubory) a souborech kódu jazyka C# (.cs), zarážky, které jste nastavili, se zobrazí při spuštění kódu na kartě prohlížeče aplikace (počáteční karta otevřená po spuštění vzdáleného ladění). Po dosažení bodu přerušení procházejte kód krokováním (F10) nebo pokračujte v běžném provádění kódu (F8) na kartě Ladění.

Pro ladění prohlížeče založeného na Chromiu poskytuje Blazor ladicí proxy, která implementuje protokol Chrome DevTools Protocol a rozšiřuje jej o informace specifické pro .NET. Při stisknutí Blazor klávesové zkratky pro ladění nasoukne nástroj DevTools pro Chrome na proxy server. Proxy se připojí k okně prohlížeče, které chcete ladit (proto je potřeba povolit vzdálené ladění).

Ladění aplikace pomocí Firefoxu Blazor WebAssembly

Pokyny v této části platí pro ladění Blazor WebAssembly aplikací ve Firefoxu ve Windows.

Ladění aplikace Blazor WebAssembly pomocí Firefoxu vyžaduje nastavení prohlížeče pro vzdálené ladění a připojení k němu pomocí vývojářských nástrojů prohlížeče prostřednictvím ladicího proxy serveru .NET WebAssembly.

Poznámka:

Ladění ve Firefoxu ze sady Visual Studio se v tuto chvíli nepodporuje.

Chcete-li ladit aplikaci Blazor WebAssembly ve Firefoxu během vývoje:

1. Konfigurace Firefoxu:
   • Otevřete about:config na nové kartě prohlížeče. Přečtěte si a zavřete upozornění, které se zobrazí.
   • Povolte devtools.debugger.remote-enabled nastavením jeho hodnoty na True.
   • Povolte devtools.chrome.enabled nastavením jeho hodnoty na True.
   • Zakažte devtools.debugger.prompt-connection nastavením jeho hodnoty na False.
2. Zavřete všechny instance Firefoxu.
3. Spusťte aplikaci v příkazovém prostředí s dotnet watch (nebo dotnet run).
4. Znovu spusťte prohlížeč Firefox a přejděte do aplikace.
5. Otevřete about:debugging na nové kartě prohlížeče. Nechte tuto kartu otevřenou.
6. Vraťte se na kartu, kde aplikace běží. Spusťte vzdálené ladění stisknutím kláves Shift+Alt+d.
7. Na kartě Debugger otevřete v uzlu file:// zdrojový soubor aplikace, který chcete ladit, a nastavte bod přerušení. Například nastavte zarážku na currentCount++; řádku v IncrementCount metodě Counter komponenty (Pages/Counter.razor).
8. Přejděte na stránku komponenty Counter (/counter) na kartě prohlížeče aplikace a kliknutím na tlačítko počitadla se zastavte na bodu přerušení.
9. Stisknutím klávesy F5 pokračujte v provádění na kartě ladění.

Přerušení neošetřených výjimek

Ladicí program se u neošetřených výjimek nezastaví, protože Blazor zachytává výjimky, které nejsou ošetřeny kódem vývojáře.

Přerušení neošetřených výjimek:

• Otevřete nastavení výjimek ladicího programu (Ladění>Okna>Nastavení výjimek) v aplikaci Visual Studio.
• Nastavte následující nastavení výjimek JavaScriptu :
  • Všechny výjimky
  • Nezachycené výjimky

Mapy zdrojů prohlížeče

Zdrojové mapy prohlížeče umožňují prohlížeči mapovat kompilované soubory zpět do původních zdrojových souborů a běžně se používají pro ladění na straně klienta. V současné době ale Blazor nemapuje C# přímo na JavaScript nebo Wasm. Blazor Místo toho interpretuje IL v prohlížeči, takže zdrojové mapy nejsou relevantní.

Konfigurace brány firewall

Pokud brána firewall blokuje komunikaci s ladicím proxy serverem, vytvořte pravidlo výjimky brány firewall, které povoluje komunikaci mezi prohlížečem a procesem NodeJS .

Varování

Aby se zabránilo vytváření ohrožení zabezpečení, je potřeba upravit konfiguraci brány firewall. Pečlivě použijte pokyny k zabezpečení, postupujte podle osvědčených postupů zabezpečení a respektujte upozornění vystavená výrobcem brány firewall.

Povolení otevřené komunikace s procesem NodeJS :

• Otevře server Node pro jakékoli připojení v závislosti na možnostech a konfiguraci brány firewall.
• V závislosti na vaší síti může být rizikové.
• Doporučuje se jenom na vývojářských počítačích.

Pokud je to možné, povolte otevřenou komunikaci s procesem NodeJSpouze v důvěryhodných nebo privátních sítích.

Pokyny ke konfiguraci brány Windows Firewall najdete v tématu Vytvoření příchozího programu nebo pravidla služby. Další informace najdete v tématu Brána firewall v programu Windows Defender s pokročilým zabezpečením a související články v sadě dokumentace brány Windows Firewall.

Odstraňování potíží

Pokud narazíte na chyby, můžou vám pomoct následující tipy:

• Odebrat zarážky:
  • Google Chrome: Na kartě Debugger otevřete v prohlížeči vývojářské nástroje. V konzoli spusťte localStorage.clear(), chcete-li odebrat všechny body přerušení.
  • Microsoft Edge: Na kartě Aplikace otevřete místní úložiště. Klikněte pravým tlačítkem myši na web a vyberte Vymazat.
• Ověřte, že jste nainstalovali a důvěřovali vývojovému certifikátu ASP.NET Core HTTPS. Další informace najdete v tématu Vynucení HTTPS v ASP.NET Core.
• Visual Studio vyžaduje možnost Povolit ladění JavaScriptu pro ASP.NET (Chrome a Edge) v Nástroje>Možnosti>Ladění>Obecné. Toto je výchozí nastavení pro Visual Studio. Pokud ladění nefunguje, ověřte, že je vybraná možnost.
• Pokud vaše prostředí používá proxy server HTTP, ujistěte se, že localhost je součástí nastavení obejití proxy serveru. To lze provést nastavením proměnné prostředí NO_PROXY v jednom z těchto umístění:
  • Soubor launchSettings.json pro projekt.
  • Na úrovni uživatelských nebo systémových proměnných prostředí, aby se to vztahovalo na všechny aplikace. Při použití proměnné prostředí restartujte Visual Studio, aby se změna projevila.
• Ujistěte se, že brány firewall nebo proxy servery neblokují komunikaci s ladicím proxy serverem (NodeJS procesem). Další informace najdete v části Konfigurace brány firewall.

Body přerušení v OnInitialized{Async} nejsou dosaženy

Ladicí proxy rozhraní Blazor se po spuštění aplikace nespustí okamžitě, takže breakpointy v OnInitialized{Async} metodách životního cyklu nemusí být zasaženy. Doporučujeme přidat zpoždění na začátek těla metody, aby měla ladicí proxy čas se spustit před dosažením zarážky. Zpoždění můžete podmínit pomocí ifdirektivy kompilátoru, abyste zajistili, že v produkčním sestavení aplikace nebude zahrnuto.

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Časový limit sady Visual Studio (Windows)

Pokud Visual Studio vyvolá výjimku oznamující, že se adaptér ladění nepodařilo spustit a že bylo dosaženo časového limitu, můžete časový limit upravit pomocí nastavení v registru:

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

Zástupný {TIMEOUT} symbol v předchozím příkazu je v milisekundách. Například jedna minuta je přiřazena jako 60000.

Ovládání funkce Opětovné načítání za provozu

Vlastnost MSBuild WasmEnableHotReload povoluje Opětovné načítání za provozu a při sestavení v konfiguraci true je ve výchozím nastavení nastavena na Debug. Průběžné opětovné načítání není při sestavení v žádné jiné konfiguraci povoleno (nastaveno na false).

Pokud chcete při ladění použít vlastní název konfigurace, například DebugWebAssembly, nastavte hodnotu vlastnosti na true, aby se povolila funkce Opětovné načítání za provozu:

<PropertyGroup>
  <WasmEnableHotReload>true</WasmEnableHotReload>
</PropertyGroup>

Chcete-li pro konfiguraci Debug zakázat funkci Opětovné načítání za provozu, nastavte hodnotu na false:

<PropertyGroup>
  <WasmEnableHotReload>false</WasmEnableHotReload>
</PropertyGroup>