Fouten opsporen in ASP.NET Core-apps

In dit artikel wordt beschreven hoe u fouten in Blazor apps opspoort, waaronder foutopsporing Blazor WebAssembly apps met hulpprogramma's voor browserontwikkelaars of een IDE (Integrated Development Environment).

Blazor Web App's kunnen worden gedebugged in Visual Studio of Visual Studio Code.

Blazor WebAssembly apps kunnen worden gedebugd.

• In Visual Studio of Visual Studio Code.
• Hulpprogramma's voor browserontwikkelaars gebruiken in browsers op basis van Chromium, waaronder Microsoft Edge, Google Chrome en Firefox.

Beschikbare scenario's voor Blazor WebAssembly foutopsporing zijn onder andere:

• Onderbrekingspunten instellen en verwijderen.
• Voer de app uit met ondersteuning voor foutopsporing in IDE's.
• Stap voor stap door de code.
• De uitvoering van code hervatten met een sneltoets in IDE's.
• Bekijk in het venster Locals de waarden van lokale variabelen.
• Bekijk de aanroepstack, inclusief aanroepketens tussen JavaScript en .NET.
• Gebruik een symboolserver voor foutopsporing, geconfigureerd door Visual Studio-voorkeuren.

Niet-ondersteunde scenario's zijn onder andere:

• Fouten opsporen in niet-lokale scenario's (bijvoorbeeld Windows-subsysteem voor Linux (WSL) of Visual Studio Codespaces).
• Fouten opsporen in Firefox vanuit Visual Studio of Visual Studio Code.

Voorwaarden

In deze sectie worden de vereisten voor foutopsporing uitgelegd.

Browservereisten

De nieuwste versie van de volgende browsers:

• Google Chrome
• Microsoft Edge
• Firefox (alleen hulpprogramma's voor browserontwikkelaars)

Zorg ervoor dat firewalls of proxy's de communicatie met de foutopsporingsproxy (NodeJS proces) niet blokkeren. Zie de sectie Firewall-configuratie voor meer informatie.

Notitie

Apple Safari in macOS wordt momenteel niet ondersteund.

Vereisten voor IDE

De nieuwste versie van Visual Studio of Visual Studio Code is vereist.

Vereisten voor Visual Studio Code

Visual Studio Code vereist de C# Dev Kit voor Visual Studio Code (Aan de slag met C# in VS Code). Filter in visual Studio Code Extensions Marketplace de extensielijst met 'c# dev kit' om de extensie te zoeken:

Als u de C# Dev Kit installeert, worden automatisch de volgende extra extensies geïnstalleerd:

• .NET Installatiehulpprogramma
• C#
• IntelliCode voor C# Dev Kit

Als er waarschuwingen of fouten optreden, kunt u een probleem (microsoft/vscode-dotnettools GitHub-opslagplaats) openen het probleem beschrijven.

Vereisten voor app-configuratie

De richtlijnen in deze subsectie zijn van toepassing op foutopsporing aan de clientzijde.

Open het Properties/launchSettings.json-bestand van het opstartproject. Bevestig de aanwezigheid van de volgende inspectUri eigenschap in elk startprofiel van het profiles knooppunt van het bestand. Als de volgende eigenschap niet aanwezig is, voegt u deze toe aan elk profiel:

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

De eigenschap inspectUri:

• Hiermee kan de IDE detecteren dat de app een Blazor app is.
• Geeft de scriptdebugging-infrastructuur opdracht om verbinding te maken met de browser via Blazorfoutopsporingsproxy.

De tijdelijke aanduidingen voor het WebSocket-protocol (wsProtocol), host (url.hostname), poort (url.port) en inspector-URI op de gestarte browser (browserInspectUri) worden geleverd door het framework.

Pakketten

Blazor Web Apps: Microsoft.AspNetCore.Components.WebAssembly.Server: Verwijst naar een intern pakket (Microsoft.NETCore.BrowserDebugHost.Transport) voor assembly's die de host voor foutopsporing van de browser delen.

Zelfstandige Blazor WebAssembly: Microsoft.AspNetCore.Components.WebAssembly.DevServer: Ontwikkelserver voor gebruik bij het bouwen van Blazor apps. Roept intern UseWebAssemblyDebugging aan om middleware toe te voegen voor het debuggen van Blazor WebAssembly apps in de ontwikkelhulpprogramma's van Chromium.

Notitie

Zie de artikelen onder Installeren en beheren van pakketten in Pakketverbruikworkflow (NuGet-documentatie)voor hulp bij het toevoegen van pakketten aan .NET-apps. Bevestig de juiste pakketversies op NuGet.org.

Debuggen van een Blazor Web App in een IDE

Visual Studio

In het voorbeeld in deze sectie wordt ervan uitgegaan dat u een Blazor Web App hebt gemaakt met een interactieve weergavemodus van Auto (Server en WebAssembly) en een interactiviteitslocatie per onderdeel.

1. Open de app.
2. Stel een onderbrekingspunt in op de currentCount++; regel in het Counter-onderdeel (Pages/Counter.razor) van het clientproject (.Client).
3. Terwijl het serverproject is geselecteerd in Solution Explorer, drukt u op F5- om de app uit te voeren in het foutopsporingsprogramma.
4. Navigeer in de browser naar Counter pagina op /counter. Wacht enkele seconden totdat de foutopsporingsproxy is geladen en uitgevoerd. Selecteer de Klik op knop om op het onderbrekingspunt te drukken.
5. Inspecteer in Visual Studio de waarde van het veld currentCount in het venster Locals.
6. Druk op F5- om door te gaan met de uitvoering.

Onderbrekingspunten kunnen ook worden bereikt in het serverproject in statisch gerenderde en interactief gerenderde onderdelen aan de serverzijde.

1. Stop het foutopsporingsprogramma.
2. Open in de server-app het statisch weergegeven Weather onderdeel (Components/Pages/Weather.razor) en stel een onderbrekingspunt in op een willekeurige plaats in de methode OnInitializedAsync.
3. Druk op F5- om de app uit te voeren in het foutopsporingsprogramma.
4. Navigeer in de browser naar de pagina Weather op /weather. Wacht enkele seconden totdat de foutopsporingsproxy is geladen en uitgevoerd. De uitvoering van de toepassing stopt op het onderbrekingspunt.
5. Druk op F5- om door te gaan met de uitvoering.

Onderbrekingspunten worden niet geraakt tijdens het opstarten van de app voordat de foutopsporingsproxy wordt uitgevoerd. Dit omvat onderbrekingspunten in het Program-bestand en onderbrekingspunten in de OnInitialized{Async} levenscyclusmethoden van onderdelen die worden geladen door de eerste pagina die door de app wordt aangevraagd.

Visual Studio Code

In het voorbeeld in deze sectie wordt ervan uitgegaan dat u een Blazor Web App hebt gemaakt met een interactieve modus voor automatisch weergeven (Server en WebAssembly) en de interactiviteitslocatie per onderdeel.

1. Open de app in Visual Studio Code door de oplossingsmap te openen. Dit is de map met de server en .Client projectmappen.
2. Stel een onderbrekingspunt in op de currentCount++; regel in het Counter-onderdeel (Pages/Counter.razor) van het clientproject (.Client).
3. Open het deelvenster Uitvoeren en fouten opsporen en selecteer de knop Uitvoeren en fouten opsporen. U kunt ook op F5 drukken (Foutopsporing starten). Selecteer het C# foutopsporingsprogramma in het opdrachtpalet bovenaan de gebruikersinterface. Selecteer het standaardprofiel voor het serverproject (bijvoorbeeld C#:BlazorSample [Default Configuration]).
4. Navigeer in de browser naar Counter pagina op /counter. Wacht enkele seconden totdat de foutopsporingsproxy is geladen en uitgevoerd. Selecteer de Klik op knop om op het onderbrekingspunt te drukken.
5. Selecteer de knop Doorgaan in de gebruikersinterface of druk op F5 (Doorgaan) om door te gaan met de uitvoering.

Onderbrekingspunten kunnen ook worden bereikt in het serverproject.

1. Stop de foutopsporing door de knop Stoppen te selecteren of druk op Shift+F5- op het toetsenbord.
2. Open in de server-app het statisch weergegeven Weather onderdeel (Components/Pages/Weather.razor) en stel een onderbrekingspunt in op een willekeurige plaats in de methode OnInitializedAsync.
3. Selecteer de knop Foutopsporing starten in de gebruikersinterface of druk op F5 (Start Debugging) om de app uit te voeren in het foutopsporingsprogramma.
4. Navigeer in de browser naar de pagina Weather op /weather. Wacht enkele seconden totdat de foutopsporingsproxy is geladen en uitgevoerd. De uitvoering van de toepassing stopt op het onderbrekingspunt.
5. Selecteer de knop Doorgaan in de gebruikersinterface of druk op F5 (Doorgaan) om door te gaan met de uitvoering.

Onderbrekingspunten worden niet geraakt tijdens het opstarten van de app voordat de foutopsporingsproxy wordt uitgevoerd. Dit omvat onderbrekingspunten in het Program-bestand en onderbrekingspunten in de OnInitialized{Async} levenscyclusmethoden van onderdelen die worden geladen door de eerste pagina die door de app wordt aangevraagd.

Fouten opsporen in een Blazor WebAssembly-app in een IDE

Visual Studio

1. Open de app.
2. Stel een onderbrekingspunt in op de currentCount++; regel in het Counter onderdeel (Pages/Counter.razor).
3. Druk op F5- om de app uit te voeren in het foutopsporingsprogramma.
4. Navigeer in de browser naar Counter pagina op /counter. Wacht enkele seconden totdat de foutopsporingsproxy is geladen en uitgevoerd. Selecteer de Click me knop om het onderbrekingspunt te bereiken.
5. Inspecteer in Visual Studio de waarde van het veld currentCount in het venster Locals.
6. Druk op F5- om door te gaan met de uitvoering.

Onderbrekingspunten worden niet geraakt tijdens het opstarten van de app voordat de foutopsporingsproxy wordt uitgevoerd. Dit omvat onderbrekingspunten in het Program-bestand en onderbrekingspunten in de OnInitialized{Async} levenscyclusmethoden van onderdelen die worden geladen door de eerste pagina die door de app wordt aangevraagd.

Visual Studio Code

1. Open de map van de app in Visual Studio Code.
2. Stel een onderbrekingspunt in op de currentCount++; regel in het Counter onderdeel (Pages/Counter.razor).
3. Open het deelvenster Uitvoeren en fouten opsporen en selecteer de knop Uitvoeren en fouten opsporen. U kunt ook op F5 drukken (Foutopsporing starten). Selecteer het C# foutopsporingsprogramma in het opdrachtpalet bovenaan de gebruikersinterface. Selecteer het standaardprofiel (bijvoorbeeld C#:BlazorSample [Default Configuration]).
4. Druk op F5- om de app uit te voeren in het foutopsporingsprogramma.
5. De zelfstandige app wordt gestart en er wordt een foutopsporingsbrowser geopend.
6. Navigeer in de browser naar Counter pagina op /counter. Wacht enkele seconden totdat de foutopsporingsproxy is geladen en uitgevoerd. Selecteer de Klik op knop om op het onderbrekingspunt te drukken.
7. Druk op F5- om door te gaan met de uitvoering.

Onderbrekingspunten worden niet geraakt tijdens het opstarten van de app voordat de foutopsporingsproxy is gestart. Dit omvat onderbrekingspunten in het Program-bestand en onderbrekingspunten in de OnInitialized{Async} levenscyclusmethoden van componenten die door de eerste door de app opgevraagde pagina worden geladen.

Koppelen aan een bestaande Visual Studio Code-foutopsporingssessie

Als u een actieve Blazor-app wilt koppelen, opent u het .vscode/launch.json-bestand en vervangt u de tijdelijke aanduiding {URL} door de URL waar de app wordt uitgevoerd:

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

Startopties voor Visual Studio Code

De opstartconfiguratieopties in de volgende tabel worden ondersteund voor het blazorwasm foutopsporingstype (.vscode/launch.json).

Optie	Beschrijving
browser	De browser die moet worden gestart voor de foutopsporingssessie. Ingesteld op edge of chrome. Standaard ingesteld op edge.
cwd	De werkmap waarin de app wordt gestart.
request	Gebruik launch om een foutopsporingssessie te starten en te koppelen aan een Blazor WebAssembly-app of attach om een foutopsporingssessie te koppelen aan een al uitgevoerde app.
timeout	Het aantal milliseconden dat moet worden gewacht totdat de foutopsporingssessie is gekoppeld. De standaardwaarde is 30.000 milliseconden (30 seconden).
trace	Wordt gebruikt voor het genereren van logboeken van het JS foutopsporingsprogramma. Ingesteld op true om logboeken te genereren.
url	De URL die moet worden geopend in de browser bij foutopsporing.
webRoot	Bepaalt het absolute pad van de webserverlocatie. Moet worden ingesteld als een app wordt geleverd vanuit een subroute.

Fouten opsporen Blazor WebAssembly met Google Chrome of Microsoft Edge

De richtlijnen in deze sectie zijn van toepassing op het debuggen van Blazor WebAssembly apps in:

• Google Chromedraaien op Windows of macOS.
• Microsoft Edgewordt uitgevoerd in Windows.

1. Voer de app uit in een opdrachtshell met dotnet watch (of dotnet run).

2. Start een browser en navigeer naar de URL van de app.

3. Start externe foutopsporing door op het volgende te drukken:

   • Shift+Alt+d in Windows.
   • Shift+⌘+d op macOS.

   De browser moet worden uitgevoerd met externe foutopsporing ingeschakeld. Dit is niet de standaardinstelling. Als foutopsporing op afstand is uitgeschakeld, wordt er een Kan foutopsporingsbare browsertabblad niet vinden foutpagina wordt weergegeven met instructies voor het starten van de browser met de poort voor foutopsporing geopend. Volg de instructies voor uw browser.

   Nadat u de instructies hebt gevolgd om foutopsporing op afstand in te schakelen, wordt de app geopend in een nieuw browservenster. Start externe foutopsporing door op de sneltoetscombinatie te drukken in het nieuwe browservenster:

   • Shift+Alt+d binnen Windows.
   • Shift+⌘+d op macOS.

   Er wordt een nieuw browsertabblad voor ontwikkelaarshulpprogramma's geopend met een vervaagd beeld van de app.

   Notitie

   Als u de instructies hebt gevolgd om een nieuw browsertabblad te openen waarvoor externe foutopsporing is ingeschakeld, kunt u het oorspronkelijke browservenster sluiten en het tweede venster geopend laten met het eerste tabblad waarop de app wordt uitgevoerd en het tweede tabblad waarop het foutopsporingsprogramma wordt uitgevoerd.

4. Na een ogenblik toont het tabblad Bronnen een lijst met .NET-assembly's en -pagina's van de app.

5. Open het knooppunt file://. In onderdeelcode (.razor-bestanden) en C#-codebestanden (.cs), worden onderbrekingspunten bereikt die u instelt wanneer code wordt uitgevoerd op het browsertabblad van de app (het eerste tabblad dat is geopend na het starten van externe foutopsporing). Nadat een onderbrekingspunt is bereikt, kunt u stap-voor-stap (F10) door de code gaan of de uitvoering van de code normaal hervatten (F8) op het tabblad Foutopsporing.

Voor foutopsporing in browsers gebaseerd op Chromium biedt Blazor een foutopsporingsproxy die het Chrome DevTools Protocol implementeert en het protocol uitbreidt met .NET-specifieke informatie. Wanneer de sneltoets voor foutopsporing wordt ingedrukt, wijst Blazor de Chrome DevTools aan bij de proxy. De proxy maakt verbinding met het browservenster dat u zoekt om fouten op te sporen (vandaar de noodzaak om externe foutopsporing in te schakelen).

Fouten opsporen in een Blazor WebAssembly-app met Firefox

De richtlijnen in deze sectie zijn van toepassing op debuggen Blazor WebAssembly apps in Firefox die op Windows worden uitgevoerd.

Voor het opsporen van fouten in een Blazor WebAssembly-app met Firefox moet u de browser configureren voor externe foutopsporing en verbinding maken met de browser met behulp van de hulpprogramma's voor browserontwikkelaars via de .NET WebAssembly-foutopsporingsproxy.

Notitie

Foutopsporing in Firefox vanuit Visual Studio wordt momenteel niet ondersteund.

Fouten opsporen in een Blazor WebAssembly-app in Firefox tijdens de ontwikkeling:

1. Firefox configureren:
   • Open about:config op een nieuw browsertabblad. Lees en sluit de waarschuwing die wordt weergegeven.
   • Schakel devtools.debugger.remote-enabled in door de waarde ervan in te stellen op True.
   • Schakel devtools.chrome.enabled in door de waarde ervan in te stellen op True.
   • Schakel devtools.debugger.prompt-connection uit door de waarde ervan in te stellen op False.
2. Sluit alle Firefox-instanties.
3. Voer de app uit in een opdrachtshell met dotnet watch (of dotnet run).
4. Start de Firefox-browser opnieuw en navigeer naar de app.
5. Open about:debugging op een nieuw browsertabblad. Laat dit tabblad open.
6. Ga terug naar het tabblad waarop de app wordt uitgevoerd. Start foutopsporing op afstand door op Shift+Alt+dte drukken.
7. Open op het tabblad Debugger het app-bronbestand dat u wilt opsporen onder het file:// knooppunt en stel een onderbrekingspunt in. Stel bijvoorbeeld een onderbrekingspunt in op de currentCount++; regel in de methode IncrementCount van het Counter onderdeel (Pages/Counter.razor).
8. Ga naar de pagina Counter onderdeel (/counter) op het browsertabblad van de app en selecteer de tellerknop om op het onderbrekingspunt te drukken.
9. Druk op F5- om door te gaan met de uitvoering op het tabblad Foutopsporing.

Onderbreking bij niet-verwerkte uitzonderingen

Het foutopsporingsprogramma wordt niet onderbroken bij niet-verwerkte uitzonderingen, omdat Blazor uitzonderingen onderschept die niet worden verwerkt door ontwikkelaarscode.

Om te pauzeren bij niet-verwerkte uitzonderingen:

• Open de uitzonderingsinstellingen van het foutopsporingsprogramma (Debug>Windows>Exception Settings) in Visual Studio.
• Stel de volgende JavaScript-uitzonderingen in instellingen:
  • alle uitzonderingen
  • Onopgevangen Uitzonderingen

Browserbronkaarten

Met browserbrontoewijzingen kan de browser gecompileerde bestanden weer toewijzen aan hun oorspronkelijke bronbestanden en worden vaak gebruikt voor foutopsporing aan de clientzijde. Blazor wijst momenteel echter C# niet rechtstreeks toe aan JavaScript/WASM. In plaats daarvan voert Blazor IL-interpretatie uit in de browser, zodat bronmappings niet relevant zijn.

Firewallconfiguratie

Als een firewall de communicatie met de foutopsporingsproxy blokkeert, maakt u een firewall-uitzonderingsregel die communicatie tussen de browser en het NodeJS proces toestaat.

Waarschuwing

Het wijzigen van een firewallconfiguratie moet zorgvuldig worden uitgevoerd om beveiligingsproblemen te voorkomen. Pas zorgvuldig beveiligingsrichtlijnen toe, volg de aanbevolen beveiligingsprocedures en respecteer waarschuwingen die zijn uitgegeven door de fabrikant van de firewall.

Open communicatie met het NodeJS proces toestaan:

• Hiermee opent u de knooppuntserver voor elke verbinding, afhankelijk van de mogelijkheden en configuratie van de firewall.
• Kan riskant zijn, afhankelijk van uw netwerk.
• wordt alleen aanbevolen op ontwikkelcomputers.

Sta, indien mogelijk, alleen open communicatie toe met het NodeJS proces op vertrouwde of particuliere netwerken.

Zie Een binnenkomend programma of een serviceregel makenvoor configuratierichtlijnen voor Windows Firewall. Zie Windows Defender Firewall met Advanced Security en gerelateerde artikelen in de documentatieset van Windows Firewall voor meer informatie.

Oplossen

Als er fouten optreden, kunnen de volgende tips u helpen:

• Onderbrekingspunten verwijderen:
  • Google Chrome: Open op het tabblad Foutopsporingsprogramma de ontwikkelhulpprogramma's in uw browser. Voer in de console localStorage.clear() uit om onderbrekingspunten te verwijderen.
  • Microsoft Edge: Open op het tabblad Toepassing Application de lokale opslag Local storage. Klik met de rechtermuisknop op de site en selecteer Wis .
• Controleer of u het ASP.NET Core HTTPS-ontwikkelingscertificaat hebt geïnstalleerd en vertrouwd. Zie HTTPS afdwingen in ASP.NET Corevoor meer informatie.
• Visual Studio vereist de optie JavaScript-foutopsporing inschakelen voor ASP.NET (Chrome en Edge) in Tools>Options>Debugging>General. Dit is de standaardinstelling voor Visual Studio. Als foutopsporing niet werkt, controleert u of de optie is geselecteerd.
• Als uw omgeving gebruikmaakt van een HTTP-proxy, moet u ervoor zorgen dat localhost is opgenomen in de proxy-bypass-instellingen. U kunt dit doen door de NO_PROXY omgevingsvariabele op een van de volgende manieren in te stellen:
  • Het launchSettings.json-bestand voor het project.
  • Op het niveau van de gebruikers- of systeemomgevingsvariabelen kan deze worden toegepast op alle apps. Wanneer u een omgevingsvariabele gebruikt, start u Visual Studio opnieuw om de wijziging van kracht te laten worden.
• Zorg ervoor dat firewalls of proxy's de communicatie met de foutopsporingsproxy (NodeJS proces) niet blokkeren. Zie de sectie Firewall-configuratie voor meer informatie.

Onderbrekingspunten in OnInitialized{Async} niet bereikt

De foutopsporingsproxy van het Blazor framework wordt niet direct gestart bij het opstarten van de app, dus onderbrekingspunten in de OnInitialized{Async} levenscyclusmethoden kunnen mogelijk niet worden bereikt. Het is raadzaam om aan het begin van de methodetekst een vertraging toe te voegen om de foutopsporingsproxy enige tijd te geven om te starten voordat het onderbrekingspunt wordt bereikt. U kunt de vertraging opnemen op basis van een if compilerrichtlijn om ervoor te zorgen dat de vertraging niet aanwezig is voor een release-build van de app.

OnInitialized:

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

    ...
}

OnInitializedAsync:

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

    ...
}

Time-out voor Visual Studio (Windows)

Als Visual Studio een uitzondering genereert dat de foutopsporingsadapter niet kan worden gestart met vermelding dat de time-out is bereikt, kunt u de time-out aanpassen met een registerinstelling:

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

De tijdelijke aanduiding {TIMEOUT} in het voorgaande commando is in milliseconden. Eén minuut wordt bijvoorbeeld toegewezen als 60000.