Partager via

Utilisez les outils de développement du navigateur avec ASP.NET Core Blazor Hybrid

  • Article

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.

Avertissement

Cette version d’ASP.NET Core n’est plus prise en charge. Pour plus d’informations, consultez la Stratégie de prise en charge de .NET et .NET Core. Pour la version actuelle, consultez la version .NET 8 de cet article.

Important

Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour la version actuelle, consultez la version .NET 8 de cet article.

Cet article explique comment utiliser les outils de développement du navigateur avec des applications Blazor Hybrid.

Outils de développement du navigateur avec .NET MAUIBlazor

Vérifiez que le projet Blazor Hybrid est configuré pour prendre en charge les outils de développement du navigateur. Vous pouvez confirmer la prise en charge des outils de développement en recherchant AddBlazorWebViewDeveloperTools dans l’application.

Si le projet n’est pas déjà configuré pour les outils de développement du navigateur, ajoutez la prise en charge en :

  1. Localisant l’endroit où l’appel AddMauiBlazorWebView est effectué, probablement dans le fichier de l’application MauiProgram.cs.

  2. En haut du fichier MauiProgram.cs, vérifiez la présence d’une instruction using pour Microsoft.Extensions.Logging. Si l’instruction using n’est pas présente, ajoutez-la en haut du fichier :

    using Microsoft.Extensions.Logging;

  3. Après l’appel à AddMauiBlazorWebView, ajoutez le code suivant :

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

Pour utiliser les outils de développement du navigateur avec une application Windows :

  1. Exécutez l’application .NET MAUIBlazor Hybrid pour Windows et accédez à une page d’application qui utilise un BlazorWebView. La console des outils de développement n’est pas disponible à partir des ContentPage sans BlazorWeb View.

  2. Utilisez le raccourci clavier Ctrl+Maj+I pour ouvrir les outils de développement du navigateur.

  3. Les outils de développement fournissent diverses fonctionnalités permettant d’utiliser des applications, notamment les ressources demandées par la page, la durée de chargement des ressources et le contenu des ressources chargées. L’exemple suivant montre l’onglet Console pour afficher les messages de console, qui inclut tous les messages d’exception générés par l’infrastructure ou le code du développeur :

    Fenêtre Microsoft Edge DevTools pour une application Blazor Hybrid s’exécutant sur Windows

Pour utiliser les outils de développement du navigateur avec une application Android :

  1. Démarrez l’émulateur Android et accédez à une page d’application qui utilise un BlazorWebView. La console des outils de développement n’est pas disponible à partir des ContentPage sans BlazorWeb View.

  2. Ouvrez Google Chrome ou Microsoft Edge.

  3. Accédez à chrome://inspect/#devices (Google Chrome) ou edge://inspect/#devices (Microsoft Edge).

  4. Sélectionnez le bouton de lien inspect pour ouvrir les outils de développement. L’exemple suivant montre la page DevTools dans Microsoft Edge :

    Appareils Microsoft Edge montrant Blazorle bouton de lien « inspecter » de WebView pour ouvrir les outils de développement.

  5. Les outils de développement fournissent diverses fonctionnalités permettant d’utiliser des applications, notamment les ressources demandées par la page, la durée de chargement des ressources et le contenu des ressources chargées. L’exemple suivant montre l’onglet Console pour afficher les messages de console, qui inclut tous les messages d’exception générés par l’infrastructure ou le code du développeur :

    Fenêtre Microsoft Edge DevTools pour une application Blazor Hybrid s’exécutant sur un Pixel 5 émulé

Pour utiliser les outils de développement Safari avec une application iOS :

  1. Ouvrez Safari sur le bureau.

  2. Cochez la case Safari>Préférences>Avancées>Afficher le menu Développer dans la barre de menus.

  3. Exécutez l’application .NET MAUIBlazor Hybrid dans le simulateur iOS et accédez à une page d’application qui utilise un BlazorWebView. La console des outils de développement n’est pas disponible à partir des ContentPage sans BlazorWeb View.

  4. Revenez à Safari. Sélectionnez Développer>{CIBLE D’INSPECTION À DISTANCE}>0.0.0.0, où l’espace réservé {REMOTE INSPECTION TARGET} correspond au nom brut des appareils (par exemple, MacBook Pro) ou au numéro de série de l’appareil (par exemple XMVM7VFF10). Si plusieurs entrées pour 0.0.0.0 sont présentes, sélectionnez l’entrée qui met en surbrillance le BlazorWebView. La valeur BlazorWebView est mise en surbrillance en bleu dans le simulateur iOS lorsque l’entrée 0.0.0.0 correcte est sélectionnée.

    Safari Develop Simulator s’ouvre avec deux entrées pour « 0.0.0.0.0 » avec la deuxième entrée sélectionnée, car elle met en surbrillance le BlazorWebView dans l’interface utilisateur de l’émulateur Visual Studio.

  5. La fenêtre Inspecteur web s’affiche pour le BlazorWebView.

  6. Les outils de développement fournissent diverses fonctionnalités permettant d’utiliser des applications, notamment les ressources demandées par la page, la durée de chargement des ressources et le contenu des ressources chargées. L’exemple suivant montre l’onglet Console, qui inclut tous les messages d’exception générés par l’infrastructure ou le code du développeur :

    Inspecteur Web Safari et fenêtres du simulateur pour une application Blazor Hybrid fonctionnant sur un iPad mini émulé

Ajoutez la clé com.apple.security.get-task-allow, de type Boolean, au fichier de droits de l’application pour sa build de débogage.

Pour ajouter un fichier de droits avec la clé com.apple.security.get-task-allow, ajoutez le fichier XML suivant nommé Entitlements.Debug.plist au dossier Platforms/MacCatalyst du projet.

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>

Pour utiliser le fichier de droits pour les builds de débogage sur Mac Catalyst, ajoutez le nœud suivant <PropertyGroup> au fichier projet de l’application en tant qu’enfant du nœud <Project> :

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

Pour utiliser les outils de développement Safari avec une application macOS :

  1. Ouvrez Safari sur le bureau.

  2. Cochez la case Safari>Préférences>Avancées>Afficher le menu Développer dans la barre de menus.

  3. Exécutez l’application .NET MAUIBlazor Hybrid dans macOS.

  4. Revenez à Safari. Sélectionnez Développer>{CIBLE D’INSPECTION À DISTANCE}>0.0.0.0, où l’espace réservé {REMOTE INSPECTION TARGET} correspond au nom brut des appareils (par exemple, MacBook Pro) ou au numéro de série de l’appareil (par exemple XMVM7VFF10). Si plusieurs entrées pour 0.0.0.0 sont présentes, sélectionnez l’entrée qui met en surbrillance le BlazorWebView. La valeur BlazorWebView est mise en surbrillance en bleu dans macOS lorsque l’entrée 0.0.0.0 correcte est sélectionnée.

  5. La fenêtre Inspecteur web s’affiche pour le BlazorWebView.

  6. Les outils de développement fournissent diverses fonctionnalités permettant d’utiliser des applications, notamment les ressources demandées par la page, la durée de chargement des ressources et le contenu des ressources chargées. L’exemple suivant montre l’onglet Console, qui inclut tous les messages d’exception générés par l’infrastructure ou le code du développeur :

    Inspecteur Web Safari pour une application Blazor Hybrid

Ressources supplémentaires