Usare gli strumenti di sviluppo del browser con ASP.NET Core Blazor Hybrid

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 8 di questo articolo.

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 8 di questo articolo.

Questo articolo illustra come usare gli strumenti di sviluppo del browser con Blazor Hybrid le app.

Strumenti di sviluppo del browser con .NET MAUIBlazor

Verificare che il Blazor Hybrid progetto sia configurato per supportare gli strumenti di sviluppo del browser. È possibile confermare il supporto degli strumenti di sviluppo cercando nell'app AddBlazorWebViewDeveloperTools.

Se il progetto non è già configurato per gli strumenti di sviluppo del browser, aggiungere il supporto per:

1. Individuazione della posizione in cui viene effettuata la chiamata a AddMauiBlazorWebView , probabilmente all'interno del file dell'app MauiProgram.cs .

2. Nella parte superiore del MauiProgram.cs file verificare la presenza di un'istruzione using per Microsoft.Extensions.Logging. Se l'istruzione using non è presente, aggiungerla all'inizio del file:

   using Microsoft.Extensions.Logging;
   

3. Dopo la chiamata a AddMauiBlazorWebView, aggiungere il codice seguente:

   #if DEBUG
       builder.Services.AddBlazorWebViewDeveloperTools();
       builder.Logging.AddDebug();
   #endif
   

Per usare gli strumenti di sviluppo del browser con un'app di Windows:

1. Eseguire l'app .NET MAUIBlazor Hybrid per Windows e passare a una pagina dell'app che usa un oggetto BlazorWebView. La console degli strumenti di sviluppo non è disponibile da ContentPages senza .BlazorWeb View

2. Usare i tasti di scelta rapida CTRL+MAIUSC+per aprire gli strumenti di sviluppo del browser.

3. Strumenti di sviluppo offrono un'ampia gamma di funzionalità per l'uso delle app, tra cui gli asset richiesti dalla pagina, il tempo necessario per caricare gli asset e il contenuto degli asset caricati. L'esempio seguente mostra la scheda Console per visualizzare i messaggi della console, che includono eventuali messaggi di eccezione generati dal framework o dal codice per sviluppatori:

   

Per usare gli strumenti di sviluppo del browser con un'app Android:

1. Avviare l'emulatore Android e passare a una pagina dell'app che usa un oggetto BlazorWebView. La console degli strumenti di sviluppo non è disponibile da ContentPages senza .BlazorWeb View

2. Aprire Google Chrome o Microsoft Edge.

3. Passare a chrome://inspect/#devices (Google Chrome) o edge://inspect/#devices (Microsoft Edge).

4. Selezionare il inspect pulsante collegamento per aprire gli strumenti di sviluppo. L'esempio seguente mostra la pagina DevTools in Microsoft Edge:

   

5. Strumenti di sviluppo offrono un'ampia gamma di funzionalità per l'uso delle app, tra cui gli asset richiesti dalla pagina, il tempo necessario per caricare gli asset e il contenuto degli asset caricati. L'esempio seguente mostra la scheda Console per visualizzare i messaggi della console, che includono eventuali messaggi di eccezione generati dal framework o dal codice per sviluppatori:

   

Per usare gli strumenti di sviluppo safari con un'app iOS:

1. Aprire Safari desktop.

2. Selezionare la casella di controllo Preferenze>Safari>Avanzate>Mostra sviluppo nella barra dei menu.

3. Eseguire l'app .NET MAUIBlazor Hybrid nel simulatore iOS e passare a una pagina dell'app che usa .BlazorWebView La console degli strumenti di sviluppo non è disponibile da ContentPages senza .BlazorWeb View

4. Tornare a Safari. Selezionare Develop>{REMOTE INSPECTION TARGET}>0.0.0.0, dove il segnaposto è il {REMOTE INSPECTION TARGET} nome normale dei dispositivi ( ad esempio MacBook Pro) o il numero di serie del dispositivo ( ad esempio ).XMVM7VFF10 Se sono presenti più voci per 0.0.0.0, selezionare la voce che evidenzia .BlazorWebView L'oggetto BlazorWebView è evidenziato in blu nel simulatore iOS quando è selezionata la voce 0.0.0.0 corretta.

   

5. Viene visualizzata la finestra Controllo Web per .BlazorWebView

6. Strumenti di sviluppo offrono un'ampia gamma di funzionalità per l'uso delle app, tra cui gli asset richiesti dalla pagina, il tempo necessario per caricare gli asset e il contenuto degli asset caricati. L'esempio seguente mostra la scheda Console , che include eventuali messaggi di eccezione generati dal framework o dal codice per sviluppatori:

   

Aggiungere la com.apple.security.get-task-allow chiave, di tipo Boolean, al file entitlement dell'app per la compilazione di debug.

Per aggiungere un file entitlements con la com.apple.security.get-task-allow chiave, aggiungere il file XML seguente denominato Entitlements.Debug.plist alla Platforms/MacCatalyst cartella del progetto.

Platforms/MacCatalyst/Entitlements.Debug.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

Per usare il file entitlements per le compilazioni di debug in Mac Catalyst, aggiungere il nodo seguente <PropertyGroup> al file di progetto dell'app come figlio del <Project> nodo:

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

Per usare gli strumenti di sviluppo safari con un'app macOS:

1. Aprire Safari desktop.

2. Selezionare la casella di controllo Preferenze>Safari>Avanzate>Mostra sviluppo nella barra dei menu.

3. Eseguire l'app .NET MAUIBlazor Hybrid in macOS.

4. Tornare a Safari. Selezionare Develop>{REMOTE INSPECTION TARGET}>0.0.0.0, dove il segnaposto è il {REMOTE INSPECTION TARGET} nome normale dei dispositivi ( ad esempio MacBook Pro) o il numero di serie del dispositivo ( ad esempio ).XMVM7VFF10 Se sono presenti più voci per 0.0.0.0, selezionare la voce che evidenzia .BlazorWebView L'oggetto BlazorWebView è evidenziato in blu in macOS quando è selezionata la voce 0.0.0.0 corretta.

5. Viene visualizzata la finestra Controllo Web per .BlazorWebView

6. Strumenti di sviluppo offrono un'ampia gamma di funzionalità per l'uso delle app, tra cui gli asset richiesti dalla pagina, il tempo necessario per caricare gli asset e il contenuto degli asset caricati. L'esempio seguente mostra la scheda Console , che include eventuali messaggi di eccezione generati dal framework o dal codice per sviluppatori:

   

Risorse aggiuntive

• Chrome DevTools (Strumenti di sviluppo di Chrome)
• Panoramica degli strumenti di sviluppo di Microsoft Edge
• Guida per sviluppatori Safari