Exercice - Attacher le débogueur Visual Studio à une application web App Service

  • 15 minutes

À ce stade, l’application est déployée sur Azure, mais elle ne fonctionne pas correctement. L’application fonctionne toujours localement, donc il est difficile de déterminer exactement ce qui provoque le problème sans investigation poussée. Visual Studio peut facilement vous aider à résoudre ce problème en attachant le débogueur au processus App Service sur Azure. Les étapes ci-dessous vous permettent de déboguer l’application comme si elle s’exécutait localement.

Notes

Avant de tenter d’attacher le débogueur, vérifiez toujours que l’état de votre code local reflète ce qui a été déployé sur Azure. Cela garantit que les fichiers de symboles et le code source en local s’alignent sur l’application déployée. Dans une vraie application, si vous utilisez Git pour gérer votre projet, vous voudrez extraire le même commit ou la même mise en production qui a été déployé(e).

Configurer les paramètres de débogage

Vérifiez que vous avez effectué les étapes suivantes dans Visual Studio avant de déboguer une application dans Azure pour garantir la réussite.

  1. Tout d’abord, vérifiez que vous avez réussi à générer votre projet au moins une fois. Une build réussie garantit que le code source et tous les fichiers compilés nécessaires sont prêts à être utilisés. Si votre application s’exécute localement, veillez à l’arrêter.

  2. Accédez à Déboguer -> Options dans le menu supérieur de Visual Studio. Vérifiez que l’option Activer Uniquement mon code est décochée, puis sélectionnez OK.

    La modification de ce paramètre permet à Visual Studio de déboguer le code optimisé déployé sur Azure à l’aide des fichiers de symboles nécessaires à partir de votre dossier bin local. Les fichiers de symboles sont utilisés par le débogueur comme pont entre le code compilé, le code en cours d’exécution et le code source dans Visual Studio, ce qui explique pourquoi il est important que votre code source local corresponde à l’application de déploiement.

    A screenshot of the Visual Studio debugging settings.

Attacher le débogueur à App Service

  1. Dans le menu principal en haut de Visual Studio, sélectionnez Déboguer -> Attacher au processus pour ouvrir la boîte de dialogue correspondante. À l’aide de cette fenêtre, vous pouvez vous connecter et effectuer des attachements à différentes cibles. Dans ce cas, vous allez vous connecter à l’instance App Service que vous avez créée à l’étape précédente.

  2. Sélectionnez la liste déroulante Type de connexion et choisissez l’option Microsoft Azure App Services.

  3. Sélectionnez Rechercher... à côté du champ Cible de connexion pour ouvrir une boîte de dialogue vous permettant de parcourir vos abonnements et services d’application Azure.

  4. Recherchez et sélectionnez le service d’application GitHubBrowser123 que vous avez créé à l’étape précédente, puis choisissez OK.

  5. Le processus w3wp.exe doit apparaître dans la liste des processus disponibles auxquels se connecter, lequel est le processus principal de l’instance Azure App Service qui héberge l’application déployée. Sélectionnez ce processus, puis choisissez Attacher en bas à droite pour connecter le débogueur Visual Studio.

    A screenshot of the attach to process features.

  6. Dans Index.cshtml.cs, accédez à la première ligne de la méthode OnPost, puis définissez un point d’arrêt dans cette méthode en cliquant dans la marge de gauche. (Ou cliquez avec le bouton droit et choisissez Point d’arrêt>Insérer un point d’arrêt.)

    La méthode OnPost à l’intérieur de Index.cshtml.cs gère la majeure partie de la logique de l’application.

  7. Si vous le souhaitez, vous pouvez également vérifier que Visual Studio a chargé les fichiers de symboles pour votre session de débogage. Accédez à Déboguer > Windows > Modules pour ouvrir la fenêtre Modules. Cette fenêtre doit indiquer que les fichiers de symboles ont été correctement chargés pour le fichier .dll de navigateur GitHub après les modifications apportées à la configuration Uniquement mon code précédemment.

    A screenshot of the symbol files window.

Résoudre le bogue

Une fois vos symboles chargés, vous pouvez déboguer l’application hébergée Azure comme vous le feriez localement.

  1. Après avoir défini le point d’arrêt dans Visual Studio, basculez vers l’application dans le navigateur, entrez une valeur dotnet dans la zone de recherche de l’application, puis appuyez sur Envoyer. Visual Studio atteint le point d’arrêt dans la méthode OnPost. La première fois peut prendre un moment pour se synchroniser. Le code tente de récupérer la valeur GitHubUrl à l’aide du service IConfiguration. Par défaut, le service de configuration charge les valeurs du fichier appsettings.json dans l’application.

  2. Utilisez le bouton Pas à pas principal dans les commandes de débogage de Visual Studio (ou appuyez sur F10) pour passer à la ligne de code qui crée searchUrl. Placez le curseur de la souris sur la variable githubUrl au-dessus de celle-ci, vous trouverez que la valeur est actuellement null. Ce code fonctionnait correctement en local, donc pourquoi la valeur est null dans Azure ?

  3. Ouvrez le fichier appsettings.json pour investiguer davantage. Dans ce fichier, il existe quelques paramètres de configuration autour de la journalisation, mais aucune valeur GitHubUrl trouvée.

  4. Ouvrez le fichier appsettings.Development.json .

    Quand vous avez configuré l’exemple de projet, vous avez mis à jour les paramètres de configuration dans appsettings.Development.json. Ce fichier contient des configurations qui seront appliquées uniquement lors de l’exécution pendant le développement, et non lors du déploiement sur Azure. Oublier de définir les configurations pour la version de production de votre application hébergée dans Azure est une source courante de bogues.

    A screenshot of the application development settings.

  5. Copiez la paire clé-valeur GitHubUrl depuis appsettings.Development.json et collez-la dans le fichier appsettings.json de plus haut niveau afin que les deux fichiers correspondent. La nouvelle valeur de configuration suit l’application dans le fichier appsettings.json lorsqu’elle est de nouveau déployée sur Azure.

    Le fichier appsettings.json final doit ressembler à ce qui suit.

    A screenshot of the application settings.

  6. Détachez le débogueur d’App Service en appuyant sur le bouton Arrêter en haut de Visual Studio, comme pour une session de débogage locale.

  7. Pour redéployer les modifications que vous avez apportées, cliquez avec le bouton droit sur le nœud du projet dans l’Explorateur de solutions, puis choisissez une nouvelle fois Publier.

  8. Dans l’écran du profil de publication, tous les paramètres de déploiement d’origine sont toujours en place, donc appuyez à nouveau sur Publier pour redéployer sur Azure.

  9. Une fois le déploiement terminé, Visual Studio lance un navigateur pour afficher à nouveau l’application. Entrez une nouvelle fois dotnet dans le formulaire de recherche, puis appuyez sur Entrée. Une liste de dépôts se charge désormais correctement.

    Félicitations ! Vous avez résolu un bogue dans votre instance Azure App Service à l’aide de Visual Studio.