Felsöka ASP.NET Core-appar

Den här artikeln beskriver hur du felsöker Blazor appar, inklusive felsökning Blazor WebAssembly appar med webbläsarutvecklarverktyg eller en integrerad utvecklingsmiljö (IDE).

Blazor Web Apps kan avlusas i Visual Studio eller Visual Studio Code.

Blazor WebAssembly appar kan felsökas:

• I Visual Studio eller Visual Studio Code.
• Använda webbläsarutvecklarverktyg i Chromium-baserade webbläsare, inklusive Microsoft Edge, Google Chrome och Firefox.

Tillgängliga scenarier för Blazor WebAssembly felsökning är:

• Ange och ta bort brytpunkter.
• Kör appen med felsökningsstöd i IDE:er.
• Steg för steg genom koden.
• Återuppta kodkörningen med kortkommando i IDE:er.
• Observera värdena för lokala variabler i fönstret Locals.
• Se anropsstacken, inklusive anropskedjor mellan JavaScript och .NET.
• Använd en symbolserver för felsökning, konfigurerad av Visual Studio-inställningar.

Scenarier som inte stöds är:

• Felsöka i icke-lokala scenarier (till exempel Windows-undersystem för Linux (WSL) eller Visual Studio Codespaces).
• Felsöka i Firefox från Visual Studio eller Visual Studio Code.

Förutsättningar

I det här avsnittet beskrivs kraven för felsökning.

Krav för webbläsare

Den senaste versionen av följande webbläsare:

• Google Chrome
• Microsoft Edge
• Firefox (endast webbläsarutvecklarverktyg)

Se till att brandväggar eller proxyservrar inte blockerar kommunikationen med felsökningsproxyn (NodeJS process). Mer information finns i avsnittet Brandväggskonfiguration.

Not

Apple Safari på macOS stöds inte för närvarande.

Krav för IDE

Den senaste versionen av Visual Studio eller Visual Studio Code krävs.

Krav för Visual Studio Code

Visual Studio Code kräver C# Dev Kit för Visual Studio Code (Komma igång med C# i VS Code). I Marketplace för Visual Studio Code-tillägg filtrerar du tilläggslistan med "c# dev kit" för att hitta tillägget:

När du installerar C# Dev Kit installeras automatiskt följande ytterligare tillägg:

• .NET Install Tool
• C#
• IntelliCode för C# Dev Kit

Om du får varningar eller fel kan du öppna ett problem (microsoft/vscode-dotnettools GitHub-lagringsplats) som beskriver problemet.

Krav för appkonfiguration

Vägledningen i det här underavsnittet gäller felsökning på klientsidan.

Öppna filen Properties/launchSettings.json för startprojektet. Bekräfta förekomsten av följande inspectUri egenskap i varje startprofil för filens profiles nod. Om följande egenskap inte finns lägger du till den i varje profil:

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

Egenskapen inspectUri:

• Gör att IDE kan identifiera att appen är en Blazor app.
• Instruerar skriptfelsökningsinfrastrukturen att ansluta till webbläsaren via Blazor:s felsökningsproxy.

Platshållarvärdena för WebSocket-protokollet (wsProtocol), värd (url.hostname), port (url.port) och kontroll-URI i den lanserade webbläsaren (browserInspectUri) tillhandahålls av ramverket.

Paket

Blazor Web Apps: Microsoft.AspNetCore.Components.WebAssembly.Server: Refererar till ett internt paket (Microsoft.NETCore.BrowserDebugHost.Transport) för samlingar som delar webbläsarens felsökningshost.

Fristående Blazor WebAssembly: Microsoft.AspNetCore.Components.WebAssembly.DevServer: Utvecklingsserver för användning när du skapar Blazor appar. Anropar UseWebAssemblyDebugging internt för att lägga till mellanprogram för att felsöka Blazor WebAssembly-appar i Chromium-utvecklarverktyg.

Note

Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

Felsöka en Blazor Web App i en IDE

Visual Studio

Exemplet i det här avsnittet förutsätter att du har skapat en Blazor Web App med ett interaktivt återgivningsläge för Auto (Server och WebAssembly) och interaktivitetsplatsen per komponent.

1. Öppna appen.
2. Ange en brytpunkt på raden currentCount++; i Counter komponenten (Pages/Counter.razor) i klientprojektet (.Client).
3. När serverprojektet har valts i Solution Explorertrycker du på F5 för att köra appen i felsökningsprogrammet.
4. I webbläsaren navigerar du till sidan Counter vid /counter. Vänta några sekunder tills felsökningsproxyn läses in och körs. Välj knappen Klicka på mig för att nå brytpunkten.
5. I Visual Studio kontrollerar du värdet för fältet currentCount i fönstret Locals.
6. Tryck på F5 för att fortsätta körningen.

Brytpunkter kan också nås i serverprojektet i komponenter på serversidan som antingen renderas statiskt eller interaktivt.

1. Stoppa felsökningsprogrammet.
2. I serverappen öppnar du den statiskt renderade Weather komponenten (Components/Pages/Weather.razor) och anger en brytpunkt var som helst i metoden OnInitializedAsync.
3. Tryck på F5 för att köra appen i felsökningsprogrammet.
4. I webbläsaren navigerar du till sidan Weather på /weather. Vänta några sekunder tills felsökningsproxyn läses in och körs. Programkörningen stoppas vid brytpunkten.
5. Tryck på F5 för att fortsätta körningen.

Brytpunkter träffas inte under uppstart av appen innan felsökningsproxyn är igång. Detta inkluderar brytpunkter i Program-filen och brytpunkter i komponenters OnInitialized{Async} livscykelmetoder som laddas in av den första sidan som begärs från appen.

Visual Studio Code

Exemplet i det här avsnittet förutsätter att du har skapat en Blazor Web App med ett interaktivt autoåtergivningsläge (Server och WebAssembly) och interaktivitetsplatsen per komponent.

1. Öppna appen i Visual Studio Code genom att öppna lösningsmappen, som är mappen som innehåller servern och .Client projektmappar.
2. Ange en brytpunkt på raden currentCount++; i Counter komponenten (Pages/Counter.razor) i klientprojektet (.Client).
3. Öppna fönstret Kör och felsök och välj knappen Kör och felsöka. Du kan också trycka på F5 (Starta felsökning). Välj C# felsökaren i kommandopaletten överst i användargränssnittet. Välj standardprofilen för serverprojektet (till exempel C#:BlazorSample [Default Configuration]).
4. I webbläsaren navigerar du till sidan Counter på /counter. Vänta några sekunder tills felsökningsproxyn läses in och körs. Välj knappen Klicka på mig för att nå brytpunkten.
5. Välj knappen Fortsätt i användargränssnittet eller tryck på F5 (Fortsätt) för att fortsätta körningen.

Brytpunkter kan också nås i serverprojektet.

1. Sluta felsöka genom att välja knappen Stoppa eller tryck på Skift+F5 på tangentbordet.
2. I serverappen öppnar du den statiskt renderade Weather komponenten (Components/Pages/Weather.razor) och anger en brytpunkt var som helst i metoden OnInitializedAsync.
3. Välj knappen Starta felsökning av i användargränssnittet eller tryck på F5 (Starta felsökning) för att köra appen i felsökningsprogrammet.
4. I webbläsaren navigerar du till sidan Weather på /weather. Vänta några sekunder tills felsökningsproxyn läses in och körs. Applikationskörningen stoppas vid brytpunkten.
5. Välj knappen Fortsätt i användargränssnittet eller tryck på F5 (Fortsätt) för att fortsätta körningen.

Brytpunkter träffas inte under appens startfas innan felsökningsproxyn körs. Detta inkluderar brytpunkter i Program-filen och brytpunkter i OnInitialized{Async} livscykelmetoder av komponenter som läses in av den första sidan som begärs från appen.

Felsöka en Blazor WebAssembly-app i en IDE

Visual Studio

1. Öppna appen.
2. Ange en brytpunkt på raden currentCount++; i komponenten Counter (Pages/Counter.razor).
3. Tryck på F5 för att köra appen i felsökningsprogrammet.
4. I webbläsaren navigerar du till sidan Counter på /counter. Vänta några sekunder tills felsökningsproxyn läses in och körs. Välj knappen Klicka här för att nå brytpunkten.
5. I Visual Studio kontrollerar du värdet för fältet currentCount i fönstret Locals.
6. Tryck på F5 för att fortsätta körningen.

Brytpunkter träffas inte under appstart innan felsökningsproxyn körs. Detta inkluderar brytpunkter i Program-filen och brytpunkter i livscykelmetoderna OnInitialized{Async} av komponenter som läses in av den första sidan som begärs från appen.

Visual Studio Code

1. Öppna appens mapp i Visual Studio Code.
2. Ange en brytpunkt på raden currentCount++; i komponenten Counter (Pages/Counter.razor).
3. Öppna fönstret Kör och felsök och välj knappen Kör och felsöka. Du kan också trycka på F5 (Starta felsökning). Välj C# felsökaren i kommandopaletten överst i användargränssnittet. Välj standardprofilen (till exempel C#:BlazorSample [Default Configuration]).
4. Tryck på F5 för att köra appen i felsökningsprogrammet.
5. Den fristående appen startas och en felsökningswebbläsare öppnas.
6. I webbläsaren navigerar du till Counter webbsidan på /counter. Vänta några sekunder tills felsökningsproxyn läses in och körs. Välj knappen Klicka här för att nå brytpunkten.
7. Tryck på F5 för att fortsätta körningen.

Brytpunkter är inte triggade vid appstart innan felsökningsproxyn är aktiv. Detta inkluderar brytpunkter i Program-filen och brytpunkter i livscykelmetoderna OnInitialized{Async} för komponenter som läses in av den första sidan som begärs från appen.

Koppla till en befintlig felsökningssession i Visual Studio Code

Om du vill ansluta till en Blazor app som körs öppnar du filen .vscode/launch.json och ersätter platshållaren {URL} med url:en där appen körs:

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

Startalternativ för Visual Studio Code

Startkonfigurationsalternativen i följande tabell stöds för blazorwasm felsökningstypen (.vscode/launch.json).

Alternativ	Beskrivning
browser	Webbläsaren som ska startas för felsökningssessionen. Ange till edge eller chrome. Standardvärdet är edge.
cwd	Arbetskatalogen som appen ska startas under.
request	Använd launch för att starta och koppla en felsökningssession till en Blazor WebAssembly app eller attach för att koppla en felsökningssession till en app som redan körs.
timeout	Antalet millisekunder att vänta på att felsökningssessionen ansluter. Standardvärdet är 30 000 millisekunder (30 sekunder).
trace	Används för att generera loggar från JS felsökningsprogrammet. Ange till true för att generera loggar.
url	Url:en som ska öppnas i webbläsaren vid felsökning.
webRoot	Anger webbserverns absoluta sökväg. Bör anges om en app levereras från en delväg.

Felsöka Blazor WebAssembly med Google Chrome eller Microsoft Edge

Vägledningen i det här avsnittet gäller att felsöka Blazor WebAssembly appar i:

• Google Chromekörs på Windows eller macOS.
• Microsoft Edge-körs i Windows.

1. Kör appen i ett kommandogränssnitt med dotnet watch (eller dotnet run).

2. Starta en webbläsare och navigera till appens URL.

3. Starta fjärrfelsökning genom att trycka på:

   • Shift+Alt+d i Windows.
   • Skift+⌘+d på macOS.

   Webbläsaren måste köras med fjärrfelsökning aktiverat, vilket inte är standard. Om fjärrfelsökning har inaktiverats återges en Det går inte att hitta den felsökningsbara webbläsarfliken felsida med instruktioner för att starta webbläsaren med felsökningsporten öppen. Följ instruktionerna för webbläsaren.

   När du har följt anvisningarna för att aktivera fjärrfelsökning öppnas appen i ett nytt webbläsarfönster. Starta fjärrfelsökning genom att trycka på hotkey-kombinationen i det nya webbläsarfönstret:

   • Shift+Alt+d i Windows.
   • Skift+⌘+d på macOS.

   En ny flik med utvecklarverktyg öppnas i webbläsaren som visar en oskarp bild av appen.

   Obs

   Om du har följt anvisningarna för att öppna en ny webbläsarflik med fjärrfelsökning aktiverat kan du stänga det ursprungliga webbläsarfönstret och lämna det andra fönstret öppet med den första fliken som kör appen och den andra fliken som kör felsökningsprogrammet.

4. Efter en stund visar fliken Källor en lista över appens .NET-sammansättningar och sidor.

5. Öppna noden file://. I komponentkoden (.razor-filer) och C#-kodfiler (.cs) träffas brytpunkter du har satt när koden körs i appens webbläsarflik, den första fliken som öppnas efter att fjärrfelsökningen har startats. När en brytpunkt har nåtts går enstaka steg (F10) genom koden eller återuppta kodkörningen (F8) normalt på felsökningsfliken.

För Chromium-baserad webbläsarfelsökning tillhandahåller Blazor en felsökningsproxy som implementerar Chrome DevTools Protocol och utökar protokollet med . NET-specifik information. När du trycker på kortkommandot Blazor pekar Chrome DevTools på proxyn. Proxyn ansluter till webbläsarfönstret som du försöker felsöka (därav behovet av att aktivera fjärrfelsökning).

Felsöka en Blazor WebAssembly-app med Firefox

Vägledningen i det här avsnittet gäller felsökning av Blazor WebAssembly appar i Firefox som körs på Windows.

Felsökning av en Blazor WebAssembly app med Firefox kräver att webbläsaren konfigureras för fjärrfelsökning och anslutning till webbläsaren med hjälp av webbläsarutvecklarverktygen via .NET WebAssembly-felsökningsproxyn.

Not

Felsökning i Firefox från Visual Studio stöds inte just nu.

Så här felsöker du en Blazor WebAssembly app i Firefox under utvecklingen:

1. Konfigurera Firefox:
   • Öppna about:config på en ny webbläsarflik. Läs och stäng varningen som visas.
   • Aktivera devtools.debugger.remote-enabled genom att ange värdet till True.
   • Aktivera devtools.chrome.enabled genom att ange värdet till True.
   • Inaktivera devtools.debugger.prompt-connection genom att ange värdet till False.
2. Stäng alla Firefox-instanser.
3. Kör appen i ett kommandogränssnitt med dotnet watch (eller dotnet run).
4. Starta om Webbläsaren Firefox och navigera till appen.
5. Öppna about:debugging på en ny webbläsarflik. Låt den här fliken vara öppen.
6. Gå tillbaka till fliken där appen körs. Starta fjärrfelsökning genom att trycka på Skift+Alt+d.
7. På fliken Debugger öppnar du den appkällafil som du vill felsöka under noden file:// och anger en brytpunkt. Du kan till exempel ange en brytpunkt på raden currentCount++; i IncrementCount-metoden för komponenten Counter (Pages/Counter.razor).
8. Gå till Counter komponentsidan (/counter) på appens webbläsarflik och välj räknarknappen för att trycka på brytpunkten.
9. Tryck på F5 för att fortsätta programmets körning på felsökningsfliken.

Bryt vid ohanterade undantag

Felsökningsprogrammet bryter inte mot ohanterade undantag eftersom Blazor fångar upp undantag som inte hanteras av utvecklarkoden.

Så här bryter du på ohanterade undantag:

• Öppna felsökarens undantagsinställningar (Felsökarens>Windows>Undantagsinställningar) i Visual Studio.
• Ange följande JavaScript-undantag inställningar:
  • alla undantag
  • Ohanterade undantag

Källkartor för webbläsare

Med webbläsarkartor kan webbläsaren mappa kompilerade filer tillbaka till sina ursprungliga källfiler och används ofta för felsökning på klientsidan. Men Blazor mappar för närvarande inte C# direkt till JavaScript/WASM. I stället gör Blazor IL-tolkning i webbläsaren, så källkartor är inte relevanta.

Brandväggskonfiguration

Om en brandvägg blockerar kommunikationen med felsökningsproxyn skapar du en undantagsregel för brandväggen som tillåter kommunikation mellan webbläsaren och NodeJS processen.

Varning

En ändring av en brandväggskonfiguration måste göras med försiktighet för att undvika att skapa säkerhetsrisker. Tillämpa noggrant säkerhetsvägledning, följ bästa säkerhetsmetoder och respektera varningar som utfärdats av brandväggens tillverkare.

Tillåter öppen kommunikation med NodeJS processen:

• Öppnar Nodservern för alla anslutningar, beroende på brandväggens funktioner och konfiguration.
• Kan vara riskabelt beroende på ditt nätverk.
• Rekommenderas endast på utvecklardatorer.

Tillåt om möjligt endast öppen kommunikation med NodeJS process på betrodda eller privata nätverk.

För konfigurationsguide för Windows-brandvägg, se Skapa en inkommande program- eller serviceregel. Mer information finns i Windows Defender-brandväggen med Advanced Security och relaterade artiklar i dokumentationsuppsättningen för Windows-brandväggen.

Felsöka

Om du får fel kan följande tips vara till hjälp:

• Ta bort brytpunkter:
  • Google Chrome: Öppna utvecklarverktygen i webbläsaren på fliken Felsökningsprogram. I konsolen kör du localStorage.clear() för att ta bort eventuella brytpunkter.
  • Microsoft Edge: På fliken Program öppnar du Lokal lagring. Högerklicka på webbplatsen och välj Rensa.
• Bekräfta att du har installerat och litat på ASP.NET Core HTTPS-utvecklingscertifikat. Mer information finns i Framtvinga HTTPS i ASP.NET Core.
• Visual Studio kräver alternativet Aktivera JavaScript-felsökning för ASP.NET (Chrome och Edge) i Tools>Options>Debugging>General. Det här är standardinställningen för Visual Studio. Om felsökningen inte fungerar bekräftar du att alternativet är valt.
• Om din miljö använder en HTTP-proxy kontrollerar du att localhost ingår i inställningarna för proxy bypass. Detta kan göras genom att ange NO_PROXY miljövariabeln i antingen:
  • Fil launchSettings.json för projektet.
  • På användar- eller systemmiljövariablersnivå för att den ska gälla för alla appar. När du använder en miljövariabel startar du om Visual Studio för att ändringen ska börja gälla.
• Se till att brandväggar eller proxyservrar inte blockerar kommunikationen med felsökningsproxyn (NodeJS process). Mer information finns i avsnittet Brandväggskonfiguration.

Brytpunkter i OnInitialized{Async} träffades inte

Blazor Frameworks felsökningsproxy startas inte direkt vid appstart, så brytpunkter i OnInitialized{Async} livscykelmetoder kanske inte uppnås. Vi rekommenderar att du lägger till en fördröjning i början av metodtexten för att ge felsökningsproxyn lite tid att starta innan brytpunkten nås. Du kan inkludera fördröjningen baserat på ett if kompilatordirektiv för att säkerställa att fördröjningen inte finns med i en släppversion av appen.

OnInitialized:

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

    ...
}

OnInitializedAsync:

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

    ...
}

Tidsgräns för Visual Studio (Windows)

Om Visual Studio genererar ett undantag om att felsökningsadaptern inte kunde starta och som nämner att timeouten uppnåddes kan du justera timeouten med en registerinställning:

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

Platshållaren {TIMEOUT} i det föregående kommandot är en tidsenhet i millisekunder. Till exempel tilldelas en minut 60000.