Eseguire il debug di app ASP.NET Core

Questo articolo descrive come eseguire il debug Blazor delle app, incluso il debug di Blazor WebAssembly app con strumenti di sviluppo del browser o un ambiente di sviluppo integrato (IDE).

BlazorApp Web possono essere sottoposto a debug in Visual Studio o Visual Studio Code.

Blazor WebAssembly È possibile eseguire il debug delle app:

• In Visual Studio o Visual Studio Code.
• Uso degli strumenti di sviluppo del browser nei browser basati su Chromium, tra cui Microsoft Edge, Google Chrome e Firefox.

Gli scenari disponibili per Blazor WebAssembly il debug includono:

• Impostare e rimuovere punti di interruzione.
• Eseguire l'app con il supporto del debug negli IDE.
• Scorrere il codice in un unico passaggio.
• Riprendere l'esecuzione del codice con un tasto di scelta rapida negli IDE.
• Nella finestra Variabili locali osservare i valori delle variabili locali.
• Vedere lo stack di chiamate, incluse le catene di chiamate tra JavaScript e .NET.
• Usare un server di simboli per il debug, configurato dalle preferenze di Visual Studio.

Gli scenari non supportati includono:

• Eseguire il debug in scenari non locali, ad esempio sottosistema Windows per Linux (WSL) o Visual Studio Codespaces.
• Eseguire il debug in Firefox da Visual Studio o Visual Studio Code.

Prerequisiti

Questa sezione illustra i prerequisiti per il debug.

Prerequisiti del browser

La versione più recente dei browser seguenti:

• Google Chrome
• Microsoft Edge
• Firefox (solo strumenti di sviluppo browser)

Assicurarsi che i firewall o i proxy non blocchino la comunicazione con il proxy di debug (NodeJS processo). Per altre informazioni, vedere la sezione Configurazione del firewall.

Nota

Apple Safari in macOS non è attualmente supportato.

Prerequisiti dell'IDE

È necessaria la versione più recente di Visual Studio o Visual Studio Code.

Prerequisiti di Visual Studio Code

Visual Studio Code richiede C # Dev Kit per Visual Studio Code (Introduzione a C# in VS Code). In Visual Studio Code Extensions Marketplace filtrare l'elenco di estensioni con "c# dev kit" per individuare l'estensione:

L'installazione di C# Dev Kit installa automaticamente le estensioni aggiuntive seguenti:

• Strumento di installazione di .NET
• C#
• IntelliCode per C# Dev Kit

Se si verificano avvisi o errori, è possibile aprire un problema (microsoft/vscode-dotnettools repository GitHub) che descrive il problema.

Prerequisiti di configurazione dell'app

Le indicazioni contenute in questa sottosezione si applicano al debug lato client.

Aprire il Properties/launchSettings.json file del progetto di avvio. Verificare la presenza della proprietà seguente inspectUri in ogni profilo di avvio del nodo del profiles file. Se la proprietà seguente non è presente, aggiungerla a ogni profilo:

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

Proprietà inspectUri :

• Consente all'IDE di rilevare che l'app è un'app Blazor .
• Indica all'infrastruttura di debug degli script di connettersi al browser tramite Blazoril proxy di debug.

I valori segnaposto per il protocollo WebSocket (wsProtocol), l'host (url.hostname), la porta (url.port) e l'URI di controllo nel browser avviato (browserInspectUri) vengono forniti dal framework.

Pacchetti

BlazorApp Web: Microsoft.AspNetCore.Components.WebAssembly.Server: fa riferimento a un pacchetto interno (Microsoft.NETCore.BrowserDebugHost.Transport) per gli assembly che condividono l'host di debug del browser.

Autonomo Blazor WebAssembly: Microsoft.AspNetCore.Components.WebAssembly.DevServerserver di sviluppo da usare per la compilazione di Blazor app. Chiama WebAssemblyNetDebugProxyAppBuilderExtensions.UseWebAssemblyDebugging internamente per aggiungere middleware per il debug delle app all'interno degli Blazor WebAssembly strumenti di sviluppo Chromium.

Nota

Per indicazioni sull'aggiunta di pacchetti alle app .NET, vedere gli articoli sotto Installare e gestire pacchetti in Flusso di lavoro dell'utilizzo di pacchetti (documentazione di NuGet). Confermare le versioni corrette del pacchetto all'indirizzo NuGet.org.

Eseguire il debug di un'app Blazor Web in un IDE

Visual Studio

L'esempio in questa sezione presuppone che sia stata creata un'app Blazor Web con una modalità di rendering interattiva di Auto (Server e WebAssembly) e la posizione di interattività per componente.

1. Aprire l'app.
2. Impostare un punto di interruzione sulla currentCount++; riga nel Counter componente (Pages/Counter.razor) del progetto client (.Client).
3. Premere F5 per eseguire l'app nel debugger.
4. Nel browser passare alla Counter pagina all'indirizzo /counter. Attendere alcuni secondi per il caricamento e l'esecuzione del proxy di debug. Selezionare il pulsante Fare clic su di me per raggiungere il punto di interruzione.
5. In Visual Studio esaminare il valore del currentCount campo nella finestra Variabili locali .
6. Premere F5 per continuare l'esecuzione del programma.

I punti di interruzione possono essere raggiunti anche nel progetto server nei componenti lato server sottoposti a rendering statico e interattivo.

1. Arresta il debugger.

2. Aggiungere il componente seguente all'app server. Il componente applica la modalità di rendering Interactive Server (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. Impostare un punto di interruzione sulla currentCount++; riga nel Counter2 componente.

4. Premere F5 per eseguire l'app nel debugger.

5. Nel browser passare alla Counter2 pagina all'indirizzo /counter-2. Attendere alcuni secondi per il caricamento e l'esecuzione del proxy di debug. Selezionare il pulsante Fare clic su di me per raggiungere il punto di interruzione.

6. Premere F5 per continuare l'esecuzione del programma.

I punti di interruzione non vengono raggiunti durante l'avvio dell'app prima che il proxy di debug sia in esecuzione. Sono inclusi i punti di interruzione nel Program file e nei punti di interruzione nei OnInitialized{Async} metodi del ciclo di vita dei componenti caricati dalla prima pagina richiesta dall'app.

Visual Studio Code

L'esempio in questa sezione presuppone che sia stata creata un'app Blazor Web con una modalità di rendering interattiva (Server e WebAssembly) e una posizione di interattività per componente.

1. Aprire l'app in Visual Studio Code aprendo la cartella della soluzione, ovvero la cartella che contiene le cartelle del server e .Client del progetto.
2. Impostare un punto di interruzione sulla currentCount++; riga nel Counter componente (Pages/Counter.razor) del progetto client (.Client).
3. Aprire il riquadro Esegui e debug e selezionare il pulsante Esegui e debug . In alternativa, premere F5 (Avvia debug). Selezionare il C# debugger nel riquadro comandi nella parte superiore dell'interfaccia utente. Selezionare il profilo predefinito per il progetto server , ad esempio C#:BlazorSample [Default Configuration].
4. Nel browser passare alla Counter pagina all'indirizzo /counter. Attendere alcuni secondi per il caricamento e l'esecuzione del proxy di debug. Selezionare il pulsante Fare clic su di me per raggiungere il punto di interruzione.
5. Selezionare il pulsante Continua nell'interfaccia utente o premere F5 (Continua) per continuare l'esecuzione.

I punti di interruzione possono essere raggiunti anche nel progetto server.

1. Arrestare il debug selezionando il pulsante Arresta o premendo MAIUSC+F5 sulla tastiera.

2. Aggiungere il componente seguente all'app server. Il componente adotta la modalità di rendering Interactive Server (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. Impostare un punto di interruzione sulla currentCount++; riga nel Counter2 componente.

4. Selezionare il pulsante Avvia debug nell'interfaccia utente o premere F5 (Avvia debug) per eseguire l'app nel debugger.

5. Nel browser passare alla Counter2 pagina in /counter-2. Attendere alcuni secondi per il caricamento e l'esecuzione del proxy di debug. Selezionare il pulsante Fare clic su di me per raggiungere il punto di interruzione.

6. Selezionare il pulsante Continua nell'interfaccia utente o premere F5 (Continua) per continuare l'esecuzione.

I punti di interruzione non vengono raggiunti durante l'avvio dell'app prima che il proxy di debug sia in esecuzione. Sono inclusi i punti di interruzione nel Program file e nei punti di interruzione nei OnInitialized{Async} metodi del ciclo di vita dei componenti caricati dalla prima pagina richiesta dall'app.

Avvia senza eseguire il debug [CTRL+F5 (Windows) o ⌘+F5 (macOS)] non è supportato. Quando l'app viene eseguita nella configurazione di debug, il sovraccarico del debug comporta sempre una riduzione delle prestazioni ridotta.

Eseguire il debug di un'app Blazor WebAssembly in un IDE

Visual Studio

1. Aprire l'app.
2. Impostare un punto di interruzione sulla currentCount++; riga nel Counter componente (Pages/Counter.razor).
3. Premere F5 per eseguire l'app nel debugger.
4. Nel browser passare alla Counter pagina all'indirizzo /counter. Attendere alcuni secondi per il caricamento e l'esecuzione del proxy di debug. Selezionare il pulsante Fare clic su di me per raggiungere il punto di interruzione.
5. In Visual Studio esaminare il valore del currentCount campo nella finestra Variabili locali .
6. Premere F5 per continuare l'esecuzione del programma.

I punti di interruzione non vengono raggiunti durante l'avvio dell'app prima che il proxy di debug sia in esecuzione. Sono inclusi i punti di interruzione nel Program file e nei punti di interruzione nei OnInitialized{Async} metodi del ciclo di vita dei componenti caricati dalla prima pagina richiesta dall'app.

Visual Studio Code

1. Aprire la cartella dell'app in Visual Studio Code.
2. Impostare un punto di interruzione sulla currentCount++; riga nel Counter componente (Pages/Counter.razor).
3. Aprire il riquadro Esegui e debug e selezionare il pulsante Esegui e debug . In alternativa, premere F5 (Avvia debug). Selezionare il C# debugger nel riquadro comandi nella parte superiore dell'interfaccia utente. Selezionare il profilo predefinito , ad esempio C#:BlazorSample [Default Configuration].
4. Premere F5 per eseguire l'app nel debugger.
5. Viene avviata l'app autonoma e viene aperto un browser di debug.
6. Nel browser passare alla Counter pagina all'indirizzo /counter. Attendere alcuni secondi per il caricamento e l'esecuzione del proxy di debug. Selezionare il pulsante Fare clic su di me per raggiungere il punto di interruzione.
7. Premere F5 per continuare l'esecuzione del programma.

I punti di interruzione non vengono raggiunti durante l'avvio dell'app prima che il proxy di debug sia in esecuzione. Sono inclusi i punti di interruzione nel Program file e nei punti di interruzione nei OnInitialized{Async} metodi del ciclo di vita dei componenti caricati dalla prima pagina richiesta dall'app.

Avvia senza eseguire il debug [CTRL+F5 (Windows) o ⌘+F5 (macOS)] non è supportato. Quando l'app viene eseguita nella configurazione di debug, il sovraccarico del debug comporta sempre una riduzione delle prestazioni ridotta.

Supporto del debugger

Il debug è abilitato per il runtime quando il supporto del debugger è abilitato con <DebuggerSupport>{VALUE}</DebuggerSupport>, dove il {VALUE} segnaposto è true o false.

Per impostazione predefinita, il framework disabilita il Blazor supporto del debugger per tutte le configurazioni non di debug. Per abilitare il supporto del debugger per una configurazione non di debug, aggiungere una <DebuggerSupport> proprietà al file di progetto dell'app.

Nell'esempio seguente il supporto del debugger è abilitato per la configurazione personalizzata "DebugCustom":

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

Per altre informazioni, vedere Blazor WebAssembly Configurazione del debugger personalizzato (dotnet/runtime #96239)..

Connettersi a una sessione di debug di Visual Studio Code esistente

Per connettersi a un'app in esecuzione Blazor , aprire il .vscode/launch.json file e sostituire il {URL} segnaposto con l'URL in cui è in esecuzione l'app:

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

Opzioni di avvio di Visual Studio Code

Le opzioni di configurazione di avvio nella tabella seguente sono supportate per il blazorwasm tipo di debug (.vscode/launch.json).

Opzione	Descrizione
browser	Browser da avviare per la sessione di debug. Impostare su edge o chrome. Il valore predefinito è edge.
cwd	Directory di lavoro in cui avviare l'app.
request	Usare launch per avviare e collegare una sessione di debug a un'app Blazor WebAssembly o attach per collegare una sessione di debug a un'app già in esecuzione.
timeout	Numero di millisecondi di attesa per il collegamento della sessione di debug. Il valore predefinito è 30.000 millisecondi (30 secondi).
trace	Usato per generare log dal JS debugger. Impostare su true per generare i log.
url	URL da aprire nel browser durante il debug.
webRoot	Specifica il percorso assoluto del server Web. Deve essere impostato se un'app viene servita da una route secondaria.

Eseguire il debug Blazor WebAssembly con Google Chrome o Microsoft Edge

Le indicazioni contenute in questa sezione applicano il debug delle Blazor WebAssembly app in:

• Google Chrome in esecuzione in Windows o macOS.
• Microsoft Edge in esecuzione in Windows.

1. Eseguire l'app in una shell dei comandi con dotnet run.

2. Avviare un browser e passare all'URL dell'app.

3. Avviare il debug remoto premendo:

   • Maiusc+ALT+D in Windows.
   • Maiusc+⌘+d in macOS.

   Il browser deve essere in esecuzione con il debug remoto abilitato, che non è l'impostazione predefinita. Se il debug remoto è disabilitato, viene visualizzata una pagina di errore della scheda del browser di cui è possibile eseguire il debug con le istruzioni per avviare il browser con la porta di debug aperta. Seguire le istruzioni per il browser.

   Dopo aver seguito le istruzioni per abilitare il debug remoto, l'app viene aperta in una nuova finestra del browser. Avviare il debug remoto premendo la combinazione hotkey nella nuova finestra del browser:

   • Maiusc+ALT+D in Windows.
   • Maiusc+⌘+d in macOS.

   Viene visualizzata una nuova scheda del browser strumenti di sviluppo della finestra che mostra un'immagine fantasma dell'app.

   Nota

   Se sono state seguite le istruzioni per aprire una nuova scheda del browser con il debug remoto abilitato, è possibile chiudere la finestra originale del browser, lasciando aperta la seconda finestra con la prima scheda che esegue l'app e la seconda scheda che esegue il debugger.

4. Dopo un attimo, nella scheda Origini viene visualizzato un elenco di assembly e pagine .NET dell'app.

5. Aprire il file:// nodo. Nel codice del componente (.razor file) e nei file di codice C# (.cs), i punti di interruzione impostati vengono raggiunti quando il codice viene eseguito nella scheda del browser dell'app (la scheda iniziale aperta dopo l'avvio del debug remoto). Dopo che viene raggiunto un punto di interruzione, l'esecuzione del codice in un singolo passaggio (F10) viene eseguita normalmente nella scheda di debug.

Per il debug del browser basato su Chromium, Blazor fornisce un proxy di debug che implementa il protocollo Chrome DevTools e aumenta il protocollo con . Informazioni specifiche di NET. Quando si preme il debug dei tasti di scelta rapida, Blazor punta Chrome DevTools al proxy. Il proxy si connette alla finestra del browser in cui si sta cercando di eseguire il debug (quindi la necessità di abilitare il debug remoto).

Eseguire il debug di un'app Blazor WebAssembly con Firefox

Le indicazioni contenute in questa sezione applicano il debug delle Blazor WebAssembly app in Firefox in esecuzione in Windows.

Il debug di un'app Blazor WebAssembly con Firefox richiede la configurazione del browser per il debug remoto e la connessione al browser usando gli strumenti di sviluppo del browser tramite il proxy di debug .NET WebAssembly.

Nota

Il debug in Firefox da Visual Studio non è attualmente supportato.

Per eseguire il debug di un'app Blazor WebAssembly in Firefox durante lo sviluppo:

1. Configurare Firefox:
   • Aprire about:config in una nuova scheda del browser. Leggere e ignorare l'avviso visualizzato.
   • Abilitare devtools.debugger.remote-enabled impostandone il valore su True.
   • Abilitare devtools.chrome.enabled impostandone il valore su True.
   • Disabilitare devtools.debugger.prompt-connection impostandone il valore su False.
2. Chiudere tutte le istanze di Firefox.
3. Eseguire l'app in una shell dei comandi con dotnet run.
4. Riavviare il browser Firefox e passare all'app.
5. Aprire about:debugging in una nuova scheda del browser. Lasciare aperta questa scheda.
6. Tornare alla scheda in cui è in esecuzione l'app. Avviare il debug remoto premendo MAIUSC+ALT+D.
7. Debugger Nella scheda aprire il file di origine dell'app di cui eseguire il file:// debug nel nodo e impostare un punto di interruzione. Ad esempio, impostare un punto di interruzione sulla currentCount++; riga nel IncrementCount metodo del Counter componente (Pages/Counter.razor).
8. Passare alla pagina del Counter componente (/counter) nella scheda del browser dell'app e selezionare il pulsante del contatore per raggiungere il punto di interruzione.
9. Premere F5 per continuare l'esecuzione nella scheda debug.

Interrompere le eccezioni non gestite

Il debugger non si interrompe per impostazione predefinita sulle eccezioni non gestite perché Blazor rileva le eccezioni non gestite dal codice dello sviluppatore.

Per interrompere le eccezioni non gestite:

• Aprire le impostazioni delle eccezioni del debugger (Debug>windows>Exception Impostazioni) in Visual Studio.
• Impostare le impostazioni seguenti per le eccezioni JavaScript:
  • Tutte le eccezioni
  • Eccezioni non rilevate

Mappe origine browser

Le mappe di origine del browser consentono al browser di eseguire il mapping dei file compilati ai file di origine originali e vengono comunemente usati per il debug sul lato client. Tuttavia, Blazor attualmente non esegue il mapping diretto di C# a JavaScript/WASM. Al contrario, Blazor esegue l'interpretazione IL all'interno del browser, quindi le mappe di origine non sono rilevanti.

Configurazione firewall

Se un firewall blocca la comunicazione con il proxy di debug, creare una regola di eccezione del firewall che consenta la comunicazione tra il browser e il NodeJS processo.

Avviso

La modifica di una configurazione del firewall deve essere eseguita con attenzione per evitare di creare vulnerabilità di sicurezza. Applicare attentamente le indicazioni sulla sicurezza, seguire le procedure di sicurezza consigliate e rispettare gli avvisi emessi dal produttore del firewall.

Autorizzazione di comunicazione aperta con il NodeJS processo:

• Apre il server Node a qualsiasi connessione, a seconda delle funzionalità e della configurazione del firewall.
• Potrebbe essere rischioso a seconda della rete.
• È consigliato solo nei computer per sviluppatori.

Se possibile, consentire la comunicazione aperta solo con il NodeJS processo su reti attendibili o private.

Per indicazioni sulla configurazione di Windows Firewall , vedere Creare un programma in ingresso o una regola del servizio. Per altre informazioni, vedere Windows Defender Firewall con sicurezza avanzata e articoli correlati nel set di documentazione di Windows Firewall.

Risoluzione dei problemi

Se si verificano errori, i suggerimenti seguenti possono essere utili:

• Rimuovere i punti di interruzione:
  • Google Chrome: nella scheda Debugger aprire gli strumenti di sviluppo nel browser. Nella console eseguire localStorage.clear() per rimuovere eventuali punti di interruzione.
  • Microsoft Edge: nella scheda Applicazione aprire Archiviazione locale. Fare clic con il pulsante destro del mouse sul sito e scegliere Cancella.
• Verificare di aver installato e considerato attendibile il certificato di sviluppo ASP.NET Core HTTPS. Per altre informazioni, vedere Applicare HTTPS in ASP.NET Core.
• Visual Studio richiede l'opzione Abilita debug JavaScript per ASP.NET (Chrome e Edge) in Strumenti>Opzioni>debug>generale. Questa è l'impostazione predefinita per Visual Studio. Se il debug non funziona, verificare che l'opzione sia selezionata.
• Se l'ambiente usa un proxy HTTP, assicurarsi che localhost sia incluso nelle impostazioni di bypass del proxy. Questa operazione può essere eseguita impostando la NO_PROXY variabile di ambiente in uno dei due casi:
  • File launchSettings.json per il progetto.
  • A livello di variabili di ambiente utente o di sistema per applicarlo a tutte le app. Quando si usa una variabile di ambiente, riavviare Visual Studio per rendere effettiva la modifica.
• Assicurarsi che i firewall o i proxy non blocchino la comunicazione con il proxy di debug (NodeJS processo). Per altre informazioni, vedere la sezione Configurazione del firewall.

Punti di interruzione non OnInitialized{Async} raggiunti

Il Blazor proxy di debug del framework non viene avviato immediatamente all'avvio dell'app, quindi i punti di interruzione nei metodi del OnInitialized{Async} ciclo di vita potrebbero non essere raggiunti. È consigliabile aggiungere un ritardo all'inizio del corpo del metodo per assegnare al proxy di debug un po' di tempo prima che venga raggiunto il punto di interruzione. È possibile includere il ritardo in base a una if direttiva del compilatore per assicurarsi che il ritardo non sia presente per una build di versione dell'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

    ...
}

Timeout di Visual Studio (Windows)

Se Visual Studio genera un'eccezione che l'adattatore di debug non è riuscito ad avviare e indica che è stato raggiunto il timeout, è possibile modificare il timeout con un'impostazione del Registro di sistema:

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

Il {TIMEOUT} segnaposto nel comando precedente è espresso in millisecondi. Ad esempio, un minuto viene assegnato come 60000.