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 Webové aplikace je možné ladit v sadě Visual Studio nebo v editoru Visual Studio Code.

Blazor WebAssembly aplikace je možné ladit:

• V sadě 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.
• Prohlédněte si zásobník volání, včetně řetězů volání mezi JavaScriptem a .NET.
• K ladění použijte server symbolů nakonfigurovaný předvolbou sady Visual Studio.

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

• Ladění v jiných než místních scénáří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 editoru 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 problém otevřít (microsoft/vscode-dotnettools úložiště GitHub) popisující problém.

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í inspectUri vlastnosti v každém profilu spuštění uzlu souboru profiles . 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é vývojové prostředí (IDE) zjistit, že aplikace je Blazor aplikace.
• Instruuje infrastrukturu ladění skriptů, aby se připojila k prohlížeči prostřednictvím Blazorladicího proxy serveru.

Rozhraní poskytuje zástupné hodnoty protokolu WebSocket (), hostitele (wsProtocol), portu (url.porturl.hostname) a identifikátoru URI inspektoru ve spuštěného prohlížeči (browserInspectUri).

Balíčky

Blazor Web Apps: Microsoft.AspNetCore.Components.WebAssembly.ServerOdkazuje na interní balíček (Microsoft.NETCore.BrowserDebugHost.Transport) pro sestavení, která sdílejí hostitele ladění prohlížeče.

Samostatný Blazor WebAssemblyserver: Microsoft.AspNetCore.Components.WebAssembly.DevServerVývojový server pro použití při vytváření Blazor aplikací. Volání WebAssemblyNetDebugProxyAppBuilderExtensions.UseWebAssemblyDebugging interně pro přidání middlewaru pro ladění Blazor WebAssembly aplikací uvnitř vývojářských nástrojů 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í webové aplikace v integrovaném Blazor vývojovém prostředí

Visual Studio

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

1. Otevřete aplikaci.
2. Nastavte zarážku na currentCount++; řádku v komponentě Counter (Pages/Counter.razor) klientského projektu (.Client).
3. Stisknutím klávesy F5 spusť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í. Vyberte tlačítko Kliknout na mě a stiskněte zarážku.
5. V sadě Visual Studio zkontrolujte hodnotu currentCount pole v okně Místní hodnoty.
6. Pokračujte v provádění stisknutím klávesy F5 .

Zarážky můžou být také v serverovém projektu v staticky vykreslených a interaktivně vykreslovaných součástech na straně serveru.

1. Zastavte ladicí program.

2. Do serverové aplikace přidejte následující komponentu. Komponenta použije režim vykreslování interaktivního serveru (InteractiveServer).

   Components/Pages/Counter2.razor:

   @page "/counter-2"
   @rendermode InteractiveServer
   
   <PageTitle>Counter 2</PageTitle>
   
   <h1>Counter 2</h1>
   
   <p role="status">Current count: @currentCount</p>
   
   <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   
   @code {
       private int currentCount = 0;
   
       private void IncrementCount()
       {
           currentCount++;
       }
   }
   

3. Nastavte zarážku na currentCount++; řádku komponenty Counter2 .

4. Stisknutím klávesy F5 spusťte aplikaci v ladicím programu.

5. V prohlížeči přejděte na Counter2 stránku na adrese /counter-2. Počkejte několik sekund, než se proxy ladění načte a spustí. Vyberte tlačítko Kliknout na mě a stiskněte zarážku.

6. Pokračujte v provádění stisknutím klávesy F5 .

Před spuštěním proxy ladění se zarážky při spuštění aplikace nedosáhne . 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 webovou aplikaci s interaktivním režimem vykreslování (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 zarážku na currentCount++; řádku v komponentě Counter (Pages/Counter.razor) klientského 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í. Vyberte tlačítko Kliknout na mě a stiskněte zarážku.
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).

Zarážky můžou být také v serverovém projektu nalezeny.

1. Ladění zastavíte tak, že vyberete tlačítko Zastavit nebo stisknete klávesu Shift+F5 na klávesnici.

2. Do serverové aplikace přidejte následující komponentu. Komponenta přijímá režim vykreslování interaktivního serveru (InteractiveServer).

   Components/Pages/Counter2.razor:

   @page "/counter-2"
   @rendermode InteractiveServer
   
   <PageTitle>Counter 2</PageTitle>
   
   <h1>Counter 2</h1>
   
   <p role="status">Current count: @currentCount</p>
   
   <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   
   @code {
       private int currentCount = 0;
   
       private void IncrementCount()
       {
           currentCount++;
       }
   }
   

3. Nastavte zarážku na currentCount++; řádku komponenty Counter2 .

4. 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.

5. V prohlížeči přejděte na Counter2 stránku na adrese /counter-2. Počkejte několik sekund, než se proxy ladění načte a spustí. Vyberte tlačítko Kliknout na mě a stiskněte zarážku.

6. V uživatelském rozhraní vyberte tlačítko Pokračovat nebo pokračujte v provádění stisknutím klávesy F5 (Pokračovat).

Před spuštěním proxy ladění se zarážky při spuštění aplikace nedosáhne . 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.

Spustit bez ladění [Ctrl+F5 (Windows) nebo ⌘+F5 (macOS)] není podporováno. Když je aplikace spuštěna v konfiguraci ladění, režie ladění vždy vede k malému snížení výkonu.

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 spusť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í. Vyberte tlačítko Kliknout na mě a stiskněte zarážku.
5. V sadě Visual Studio zkontrolujte hodnotu currentCount pole v okně Místní hodnoty.
6. Pokračujte v provádění stisknutím klávesy F5 .

Před spuštěním proxy ladění se zarážky při spuštění aplikace nedosáhne . 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 spusťte aplikaci v ladicím programu.
5. Spustí se samostatná aplikace a otevře se prohlížeč 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í. Vyberte tlačítko Kliknout na mě a stiskněte zarážku.
7. Pokračujte v provádění stisknutím klávesy F5 .

Před spuštěním proxy ladění se zarážky při spuštění aplikace nedosáhne . 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.

Spustit bez ladění [Ctrl+F5 (Windows) nebo ⌘+F5 (macOS)] není podporováno. Když je aplikace spuštěna v konfiguraci ladění, režie ladění vždy vede k malému snížení výkonu.

Podpora ladicího programu

Ladění je povoleno pro modul runtime, pokud je povolena <DebuggerSupport>{VALUE}</DebuggerSupport>podpora ladicího programu , kde {VALUE} je držitel místa nebo falsetrue .

Ve výchozím nastavení architektura Blazorzakáže podporu ladicího programu pro všechny konfigurace, které nejsou ladicí. Pokud chcete povolit podporu ladicího programu pro konfiguraci bez ladění, přidejte <DebuggerSupport> do souboru projektu aplikace vlastnost.

V následujícím příkladu je pro vlastníDebugCustom konfiguraci "" povolená podpora ladicího programu:

<DebuggerSupport Condition="'$(Configuration)' == 'DebugCustom'">true</DebuggerSupport>

Další informace naleznete v tématu Blazor WebAssembly vlastní konfigurace ladicího programu (dotnet/runtime #96239).

Připojení k existující relaci ladění editoru 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 pro ladicí relaci. Nastavte na edge nebo chrome. Výchozí hodnota edgeje .
cwd	Pracovní adresář pro spuštění aplikace v části.
request	Slouží launch ke spuštění a připojení ladicí relace k Blazor WebAssembly aplikaci nebo attach k připojení ladicí relace k již spuštěné aplikaci.
timeout	Počet milisekund, které se mají počkat 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 pro true 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. Pokud se aplikace obsluhuje z dílčí trasy, měla by být nastavená.

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 Chrome běží ve Windows nebo macOS.
• Microsoft Edge spuštěný ve Windows.

1. Spusťte aplikaci v příkazovém prostředí pomocí dotnet runpříkazu .

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 ve 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ázané, zobrazí se chybová stránka karty prohlížeče s možností ladění s pokyny pro spuštění prohlížeče s otevřeným portem ladění. 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 ve Windows.
   • Shift+⌘+d v macOS.

   Otevře se karta prohlížeče s novými nástroji pro vývojáře okna zobrazující obrázek aplikace s stínovým obrázkem.

   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é s první kartou spuštěnou aplikací a druhou kartou, na které běží ladicí program.

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

5. file:// Otevřete uzel. 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í zarážky proveďte krok (F10) prostřednictvím kódu nebo obnovení (F8) spuštění kódu normálně na kartě ladění.

Pro ladění prohlížeče založeného na Chromiu poskytuje proxy ladění, Blazor které implementuje Chrome DevTools Protocol a rozšiřuje protokol 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í Blazor WebAssembly aplikace pomocí Firefoxu vyžaduje konfiguraci prohlížeče pro vzdálené ladění a připojení k prohlížeči pomocí vývojářských nástrojů prohlížeče prostřednictvím proxy ladění .NET WebAssembly.

Poznámka:

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

Ladění aplikace ve Firefoxu Blazor WebAssembly 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í.
   • Povolit devtools.debugger.remote-enabled nastavením jeho hodnoty na Truehodnotu .
   • Povolit devtools.chrome.enabled nastavením jeho hodnoty na Truehodnotu .
   • Zakažte devtools.debugger.prompt-connection nastavením jeho hodnoty na Falsehodnotu .
2. Zavřete všechny instance Firefoxu.
3. Spusťte aplikaci v příkazovém prostředí pomocí dotnet runpříkazu .
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, na které je aplikace spuštěná. Spusťte vzdálené ladění stisknutím kláves Shift+Alt+d.
7. Na Debugger kartě otevřete zdrojový soubor aplikace, který chcete ladit pod file:// uzlem, a nastavte zarážku. Například nastavte zarážku na currentCount++; řádku v IncrementCount metodě Counter komponenty (Pages/Counter.razor).
8. Přejděte na Counter stránku komponenty (/counter) na kartě prohlížeče aplikace a výběrem tlačítka čítače přejděte na zarážku.
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 ve výchozím nastavení nezalomí u neošetřených výjimek, protože Blazor zachytává výjimky neošetřené kódem vývojáře.

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

• Otevřete nastavení výjimky ladicího programu (ladění>výjimek systému Windows>Nastavení) v sadě 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. Blazor V současné době ale jazyk C# nemapuje 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 .

Upozorňující

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ě Ladicí program otevřete vývojářské nástroje v prohlížeči. Spuštěním konzoly odeberte localStorage.clear() všechny zarážky.
  • 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ástrojích 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 NO_PROXY proměnné prostředí v těchto:
  • Soubor launchSettings.json projektu.
  • Na úrovniproměnných 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.

Zarážky, které se OnInitialized{Async} nenarazí

Proxy Blazor ladění architektury se při spuštění aplikace nespustí okamžitě, takže se nemusí narazit na zarážky v OnInitialized{Async} metodách životního cyklu. Doporučujeme přidat zpoždění na začátku těla metody, aby se proxy ladění nějaký čas spustit před dosažením zarážky. Zpoždění můžete zahrnout na if základě direktivy kompilátoru, abyste zajistili, že zpoždění není k dispozici pro sestavení aplikace vydané verze.

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 sada Visual Studio vyvolá výjimku, že se adaptér ladění nepodařilo spustit zmínku o dosažení časového limitu, můžete časový limit upravit nastavením 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.