Utiliser le débogueur dans Android Studio

1. Avant de commencer

Cet atelier de programmation vous explique comment utiliser le débogueur dans Android Studio pour inspecter ce qui se passe dans l'application Dice Roller au moment de l'exécution.

Le débogueur est un outil essentiel qui vous permet d'inspecter l'exécution du code de votre application Android afin que vous puissiez corriger les bugs éventuels. Il vous permet de spécifier les points où suspendre l'exécution du code et d'interagir manuellement avec les variables, les méthodes et d'autres aspects du code.

Conditions préalables

• Vous connaissez les bases d'Android Studio.
• Vous êtes capable de créer et d'exécuter une application Jetpack Compose de base dans Android Studio.
• Vous avez terminé l'atelier de programmation Créer une application interactive : Dice Roller.

Points abordés

• Joindre le débogueur à une application Android
• Lancer une application avec le débogueur joint
• Utiliser certaines fonctionnalités essentielles du débogueur
• Cas dans lesquels le débogueur est généralement utilisé

Ce dont vous avez besoin

• Un ordinateur sur lequel est installé Android Studio
• Code de solution de l'application Dice Roller dans Compose

2. Regarder la vidéo du code pas à pas (facultatif)

Si vous souhaitez voir un formateur réaliser cet atelier de programmation, regardez la vidéo ci-dessous.

Nous vous recommandons d'afficher la vidéo en plein écran (à l'aide de l'icône  dans l'angle inférieur droit de la vidéo) pour mieux voir Android Studio et le code.

Cette étape est facultative. Vous pouvez également ignorer la vidéo et passer immédiatement aux instructions de l'atelier de programmation.

3. Télécharger le code de démarrage

Pour commencer, téléchargez le code :

Télécharger le fichier ZIP

Vous pouvez également cloner le dépôt GitHub pour obtenir le code :

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-dice-roller.git
$ cd basic-android-kotlin-compose-training-dice-roller

Remarque : Le code de démarrage se trouve dans la branche main du dépôt téléchargé.

Vous pouvez parcourir le code dans le dépôt GitHub.

4. Exécuter le débogueur

Deux options s'offrent à vous pour exécuter le débogueur avec votre application :

• Joindre le débogueur à un processus d'application existant qui s'exécute sur un appareil ou dans un émulateur
• Exécuter l'application avec le débogueur

Ces deux méthodes permettent d'atteindre le même objectif dans une certaine mesure. Une fois que vous vous serez familiarisé avec ces méthodes, vous pourrez choisir celle que vous préférez ou qui convient à votre cas de figure.

Joindre le débogueur à un processus d'application

Si votre application est déjà en cours d'exécution, vous pouvez y joindre le débogueur.

Pour joindre le débogueur à un processus d'application, procédez comme suit :

1. Cliquez sur Attach Debugger to Android Process (Associer le débogueur à un processus Android).

La boîte de dialogue Choose Process (Sélectionner un processus) s'ouvre. Elle vous permet de choisir le processus auquel vous souhaitez joindre le débogueur.

2. Sélectionnez com.example.diceroller, puis cliquez sur OK.

Le volet Debug (Débogage) s'affiche en bas d'Android Studio. Un message indique que le débogueur est joint à l'appareil ou à l'émulateur cible.

Vous avez joint le débogueur à votre application. Nous verrons ce que cela entraîne et ce que vous pouvez faire avec le débogueur plus loin dans cet atelier de programmation. Vous allez maintenant apprendre à lancer une application avec le débogueur déjà joint.

Exécuter l'application avec le débogueur

Si vous savez depuis le début que vous souhaitez utiliser le débogueur, vous pouvez gagner du temps en exécutant l'application avec le débogueur. De plus, si vous souhaitez déboguer le code qui s'exécute uniquement au lancement de l'application, il est nécessaire que le débogueur soit déjà joint à l'application.

Pour exécuter l'application avec le débogueur, procédez comme suit :

1. Dans le volet Debug (Débogage), cliquez sur Stop (Arrêter), puis fermez l'application sur l'appareil ou l'émulateur.

2. Cliquez sur Debug 'app' (Déboguer "application").

Le même volet Debug (Débogage) apparaît en bas d'Android Studio avec ce qui ressemble à une sortie de console.

Vous savez maintenant lancer le débogueur. Voyons comment l'utiliser.

5. Utiliser le débogueur

Volet de débogage

Vous avez probablement remarqué que plusieurs boutons s'affichent en haut du volet Debug (Débogage). Cependant, ces boutons n'ont pas beaucoup d'importance pour l'instant. La plupart sont grisés et non cliquables. Cette section présente les fonctionnalités les plus couramment utilisées dans le débogueur. Les autres boutons seront décrits dans cet atelier de programmation lorsque ce sera utile.

Lorsque vous lancez le débogueur pour la première fois, vous voyez plusieurs boutons dans le volet Debug (Débogage). En haut du volet Debug (Débogage) figurent les boutons Debugger (Débogueur) et Console.

Le bouton Console affiche la sortie logcat de l'application. Si votre code comporte des instructions de journalisation, le résultat s'affiche au fur et à mesure de l'exécution.

Le bouton Debugger (Débogueur) affiche trois volets distincts, qui sont actuellement vides, car vous n'utilisez pas le débogueur :

1. Affichage des images
2. Évaluation et surveillance de l'entrée de l'expression
3. Volet des variables

Utiliser les fonctionnalités de débogage courantes

Définir un point d'arrêt

L'une des principales fonctionnalités du débogueur est qu'il vous permet d'arrêter l'exécution sur une ligne de code spécifique à l'aide d'un point d'arrêt.

Pour définir un point d'arrêt dans Android Studio, vous devez accéder à une ligne de code, puis cliquer sur la gouttière située à côté du numéro de ligne. Pour annuler un point d'arrêt, cliquez sur un point d'arrêt existant dans la gouttière afin de le faire disparaître.

• Pour essayer par vous-même, définissez un point d'arrêt où la variable imageResource est définie.

Utiliser le bouton Resume Program (Reprendre le programme).

Dans la section précédente, vous avez défini un point d'arrêt au niveau duquel la variable imageResource est définie. Ce point d'arrêt entraîne la suspension de l'exécution lors de cette instruction. Lorsque l'exécution du code est suspendue avec le débogueur, vous avez parfois besoin de continuer à exécuter l'application. Pour cela, le moyen le plus direct consiste à utiliser le bouton Resume Program (Reprendre le programme).

Pour reprendre le programme, procédez comme suit :

1. Cliquez sur Debug 'app' (Déboguer "application"). L'image suivante devrait s'afficher après le lancement de l'application :

Avant de reprendre le programme, examinons ce que vous voyez à l'écran lorsque le débogueur suspend l'exécution :

• Une grande partie des boutons du volet Debug (Débogage) sont maintenant "cliquables".
• Le volet Frames contient de nombreuses informations, y compris une référence en surbrillance à la ligne au niveau de laquelle le point d'arrêt a été défini.
• Le volet Variables affiche plusieurs éléments, mais cette application ne contient pas beaucoup de variables. Par conséquent, les informations pertinentes pour cet atelier de programmation sont limitées à ce stade. Cependant, la possibilité d'inspecter les variables est une fonctionnalité essentielle du débogueur, car elle fournit des informations utiles sur ce qui se passe dans le code au moment de l'exécution. Nous verrons plus en détail comment inspecter les variables ultérieurement.

Si vous regardez l'application sur votre appareil ou dans l'émulateur, vous remarquerez que l'écran est vide, car l'application est suspendue au niveau d'une ligne de code. Plus précisément, l'exécution s'est arrêtée au point d'arrêt, et l'interface utilisateur ne s'est pas encore affichée.

N'oubliez pas que l'application ne s'arrête pas toujours immédiatement juste parce qu'un point d'arrêt a été défini. L'endroit où vous placez le point d'arrêt dans le code est déterminant. Dans ce cas, vous l'avez placé sur une ligne qui s'exécute au démarrage de l'application.

Notez que l'application ne se suspend à un point d'arrêt qu'en cas de tentative d'exécution de la ligne au niveau de laquelle le point d'arrêt a été défini. Plusieurs options s'offrent à vous pour poursuivre l'exécution du débogueur, mais pour le moment, utilisez le bouton Resume Program (Reprendre le programme).

2. Cliquez sur Resume Program (Reprendre le programme).

Vous devriez voir un écran semblable à cette image :

La plupart des informations disparaissent, et vous ne pouvez plus cliquer sur les boutons. De même, l'application s'affiche normalement sur votre appareil ou dans l'émulateur. Comme le code n'est plus suspendu au point d'arrêt, l'application fonctionne normalement. Le débogueur est joint, mais il ne fait pas grand-chose tant qu'il n'y a pas de tentative d'exécuter une ligne de code contenant un point d'arrêt. Conservez ce point d'arrêt, car il sera utile dans les exemples suivants.

Utiliser le bouton Entrer

Le bouton Entrer du débogueur permet d'explorer plus en détail le code au moment de l'exécution. Si une instruction appelle une méthode ou un autre élément de code, le bouton Step Into (Entrer) vous permet de saisir le code sans avoir à y accéder manuellement avant de lancer le débogueur pour définir un point d'arrêt.

Pour utiliser le bouton Step Into (Entrer) :

1. Créez un point d'arrêt dans le corps lambda setContent dans la fonction onCreate() de la classe MainActivity, où la fonction DiceRollerApp() est appelée.

2. Cliquez sur Debug 'app' (Déboguer "application") pour réexécuter l'application avec le débogueur. L'exécution est suspendue à la ligne sur laquelle la fonction DiceRollerApp() est appelée.
3. Cliquez sur Step Into (Entrer).

La ligne 40 est maintenant mise en surbrillance et le volet Frames (Images) du panneau Debug (Débogage) indique que le code est suspendu à la ligne 40.

Si vous développez le volet Frames (Images), vous pouvez voir que la ligne située après celle qui est en surbrillance commence par invoke: suivi d'un numéro de ligne, qui correspond à 32 dans l'image précédente. C'est ce que l'on appelle la pile d'appel. En bref, elle affiche la chaîne d'appels qui mène à l'exécution du code jusqu'à la ligne actuelle. Dans le cas présent, la ligne 32 contient une instruction qui appelle la fonction DiceRollerApp().

Lorsque le débogueur s'est arrêté au point d'arrêt défini pour cet appel de fonction et que vous avez cliqué sur le bouton Step Into (Entrer), le débogueur a analysé cette fonction, ce qui a entraîné l'exécution à la ligne 40, là où la fonction est déclarée. La ligne en surbrillance indique l'endroit où l'exécution est suspendue. Si les lignes qui la suivent sont associées à des nombres, cela indique le chemin d'exécution. Dans ce cas précis, le débogueur indique qu'une instruction à la ligne 32 vous a conduit à la ligne 40.

4. Cliquez sur Resume Program (Reprendre le programme).

Cette action devrait vous renvoyer au point d'arrêt initial que vous avez défini. Peut-être les choses vous paraissent-elles maintenant un peu plus claires que lorsque vous avez arrêté l'exécution dans le premier exemple. Voici la même image que celle de la sixième étape de la section Resume Program (Reprendre le programme) :

Dans la pile d'appel, vous pouvez voir que la fonction DiceWithButtonAndImage() a été suspendue à la ligne 50 et qu'elle a été appelée à la ligne 41 dans la fonction DiceRollerApp(), qui a été appelée à la ligne 32. La fonctionnalité de pile d'appel peut vous aider à comprendre le chemin d'exécution. Cela est particulièrement utile lorsqu'une fonction est appelée depuis de nombreux endroits différents dans l'application.

Le bouton Entrer permet de saisir une fonction et de suspendre l'exécution sans définir de point d'arrêt dans la fonction. Dans ce cas, vous définissez un point d'arrêt lors de l'appel de la fonction DiceRollerApp(). Lorsque vous cliquez sur le bouton Entrer, l'exécution s'interrompt dans la fonction DiceRollerApp().

Dice Roller est une application assez petite. Elle ne comprend pas beaucoup de fichiers, de classes ni de fonctions. Avec les applications de plus grande envergure, la fonctionnalité Entrer du débogueur devient plus utile, car elle vous permet d'explorer le code sans avoir à le parcourir vous-même.

Utilisez le bouton Passer

Le bouton Passer constitue un autre moyen de parcourir le code de votre application au moment de l'exécution. Il renvoie l'exécution à la ligne de code suivante et fait avancer le débogueur.

Pour utiliser le bouton Step Over (Passer), procédez comme suit :

• Cliquez sur Step Over (Passer).

Comme vous pouvez le constater, le débogueur a suspendu le code à la ligne d'exécution suivante, qui est la ligne 51. Vous pouvez parcourir chaque ligne l'une après l'autre.

Utiliser le bouton Step Out (Sortir)

Le bouton Step Out (Sortir) fait le contraire du bouton Step Into (Entrer). Plutôt que d'afficher le détail de la pile d'appel, le bouton Step Out (Sortir) permet d'accéder à la pile d'appel.

Pour utiliser le bouton Step Out (Sortir), procédez comme suit :

1. Cliquez sur Step Out (Sortir).

À votre avis, sur quelle ligne le programme sera-t-il suspendu ?

2. Notez que le débogueur est sorti de la fonction DiceRollerApp() et est revenu à la ligne qui l'a appelée.

Le bouton Step Out (Sortir) est particulièrement utile lorsque vous êtes trop loin dans une pile d'appel de méthode. Il vous permet de remonter la pile d'appel sans avoir à parcourir l'intégralité du code pour chaque méthode.

Inspecter les variables

Plus tôt dans l'atelier de programmation, nous avons vu une brève description du volet Variables, qui explique plus en détail comment inspecter les variables affichées dans ce volet afin de déboguer plus facilement les problèmes dans votre application.

Pour inspecter les variables :

1. Cliquez sur le point d'arrêt pour le supprimer de l'endroit où la fonction DiceRollerApp() est appelée, mais conservez le point d'arrêt là où la variable imageResource est définie.
2. Cliquez sur Debug 'app' (Déboguer "application"). Vous devriez constater que la variable result$delegate présente l'état MutableState avec la valeur 1. Cela est dû au fait que lorsque la variable est définie, elle est instanciée avec la valeur mutableStateOf 1. MutableState signifie que la variable de résultat contient un état pouvant être modifié.

Remarque : La variable result$delegate du volet Variables fait référence à la variable result dans le code. La notation $delegate apparaît, car la variable result est un délégué de remember.

3. Cliquez sur Resume Program (Reprendre le programme).
4. Dans l'application, cliquez sur Roll (Lancer). Le code est de nouveau suspendu au point d'arrêt, et vous pouvez voir une valeur différente pour la variable result$delegate.

Dans cette image, l'état modifiable de la variable result$delegate contient la valeur 2. Vous venez de découvrir comment inspecter des variables au moment de l'exécution avec le débogueur. Dans une application plus complète, la valeur d'une variable peut entraîner un plantage. Lorsque vous utilisez le débogueur pour inspecter des variables, vous pouvez obtenir plus d'informations sur le plantage afin de corriger le bug.

6. Conclusion

Félicitations ! Vous avez utilisé le débogueur dans Android Studio.

Résumé

• Vous savez maintenant joindre le débogueur à une application.
• Vous savez lancer une application avec le débogueur déjà joint.
• Vous vous êtes familiarisé avec le volet de débogage.
• Vous savez définir un point d'arrêt.
• Vous savez reprendre le programme à partir du débogueur.
• Vous savez utiliser le bouton Entrer.
• Vous savez utiliser le bouton Passer.
• Vous savez utiliser le bouton Sortir.
• Vous savez inspecter les variables à l'aide du débogueur.