--- title: Débogage d'applications mobiles date: 2020-08-05 categories: - app-development - mobile-development - mobiletogether - tools tags: - app-development - mobile-app-debugging - mobile-development-tools - mobiletogether description: Les développeurs ont besoin d'outils de débogage pour applications mobiles afin de comprendre et de résoudre les problèmes de comportement des applications. MobileTogether offre des outils de débogage complets pour analyser le fonctionnement des applications. --- Status: #blog Tags: #app-development #mobile-app-debugging #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/fr/category/mobile-development.md) # Débogage d'applications mobiles MobileTogether est un outil permettant de créer des solutions complexes et élégantes, fonctionnant sur différentes plateformes. Les développeurs ont besoin d'outils de débogage pour les applications mobiles afin de résoudre les problèmes pendant le développement et de comprendre le comportement des applications. L'outil MobileTogether Designer offre des fonctionnalités complètes de débogage du flux d'exécution des applications, directement intégrées aux arbres d'actions [Débogage des fonctions XPath/XQuery](/blog/fr/2021/03/developing-and-debugging-user-functions-in-mobile-apps.md). Ces fonctionnalités sont intégrées dans deux interfaces de débogage pour applications mobiles, regroupées dans un seul outil. La vue Débogueur d'actions permet aux développeurs de déboguer les actions associées à un événement de contrôle ou à un événement de page. Cette vue est disponible lorsqu'une action sélectionnée pour le débogage est rencontrée pendant le traitement. La vue Débogueur XPath ouvre la fenêtre d'évaluation XPath/XQuery pour un suivi et un débogage approfondis des expressions. Les développeurs peuvent définir des points d'arrêt à différents endroits du code, puis exécuter l'application étape par étape, en suspendant l'exécution à tout moment pour permettre l'examen complet de l'environnement d'exécution. Voyons maintenant comment déboguer une application mobile en pratique : ![](/blog/images/MT-debugger-lead.jpg) Dans un article précédent sur les [techniques de programmation pour le développement mobile](https://www.altova.com/blog/programming-techniques-for-mobile-development/), nous avons utilisé une application de qualité de l'air pour illustrer une sous-routine dans une application mobile. Cette sous-routine, implémentée sous forme de groupe d'actions MobileTogether, calculait l'heure locale d'une mesure de la qualité de l'air à partir des données renvoyées par une API, qui étaient fournies en heure GMT et avec une valeur de correction. Nous pouvons déboguer cette sous-routine pour nous assurer que nos calculs sont corrects. Tout d'abord, nous allons définir un point d'arrêt au début du groupe d'actions de temps local de Calc, afin de suspendre l'exécution lorsque la sous-routine est appelée : [![Définir un point d'arrêt pour le débogage d'une application mobile](/blog/images/set-break.png)](set-break.png) Vous pouvez ajouter autant de points d'arrêt que nécessaire, et vous n'avez pas à vous soucier de les retrouver plus tard. Ils sont gérés depuis le menu principal de débogage : [![Options du menu principal de débogage](/blog/images/debug-menu-1.png)](debug-menu-1.png) Nous avons également utilisé le menu pour définir l'option "Arrêter au prochain point d'arrêt". Maintenant, nous pouvons exécuter notre application dans le simulateur, et elle fonctionnera normalement jusqu'à ce que le groupe d'actions "Calc local time" soit appelé. L'image ci-dessous montre l'affichage du simulateur lorsque l'application s'est arrêtée au point d'arrêt. L'utilisateur a sélectionné un rapport pour la ville de Londres, l'application a appelé l'API, et elle souhaite maintenant calculer l'heure locale à partir des données renvoyées : [![Vue de débogage lorsque l'exécution s'arrête au point d'arrêt](/blog/images/stop-at-break.png)](stop-at-break.png) Deux panneaux de débogage sont affichés sur le côté gauche de l'écran. En haut, on voit les actions qui vont être exécutées, avec un point d'arrêt rouge et une flèche verte indiquant l'étape actuelle. Dans le panneau en dessous, on voit la pile d'appels des actions menant au groupe d'actions. Les boutons "+" dans l'affichage de la pile d'appels affichent les valeurs des paramètres transmis lorsque le groupe d'actions a été appelé. Nous pouvons cliquer sur le bouton "Entrer dans l'action" en haut pour continuer l'exécution étape par étape : [![Afficher les paramètres envoyés à la sous-routine](/blog/images/step-1.png)](step-1.png) Attendez une minute, Londres ne se trouve-t-elle pas dans la même zone horaire que Greenwich, au Royaume-Uni, et n'a-t-elle donc pas besoin d'un ajustement par rapport au Temps Universel Coordonné (UTC) ? J'ai posé la question à tous mes assistants virtuels et à tous mes moteurs de recherche, et ils m'ont répondu que Londres et Greenwich utilisent toutes les deux l'heure d'été britannique, qui est une heure en avance sur l'UTC. Quoi qu'il en soit, ce sont les données que l'API nous a fournies, donc nous pouvons continuer. En examinant les commentaires, nous arrivons à la première action "Mise à jour de nœud" : [![La première action exécutée par la sous-routine](/blog/images/step-2.png)](step-2.png) Le nœud `localDateTime` est défini sur la valeur du paramètre `$time`. Étape suivante : [![Modification de la chaîne de caractères représentant une date et une heure](/blog/images/step-3.png)](step-3.png) La lettre "T" est insérée entre la date et l'heure afin de correspondre à la syntaxe requise par la fonction `add-hours-to-dateTime()`. Étape suivante : [![Ajouter les heures provenant de l'ajustement](/blog/images/step-4.png)](step-4.png) Les heures de correction sont ajoutées. Étape suivante : [![Vérifiez les minutes à ajuster](/blog/images/step-5.png)](step-5.png) Y a-t-il des ajustements à faire ? Non. Étape suivante : [![Supprimer la lettre "T" de la date et de l'heure](/blog/images/step-6.png)](step-6.png) Remplacez la lettre "T" par un espace. Étape suivante : [![La fin de la sous-routine a été atteinte](/blog/images/step-7.png)](step-7.png) La ligne de commentaire marque la fin du groupe d'actions. Désormais, nous pouvons utiliser le bouton "Exécuter" vert en haut pour continuer l'exécution normale de l'application. Une sous-page s'ouvre pour afficher l'indice de qualité de l'air : [![Une vue de la sous-page présentant le rapport sur la qualité de l'air](/blog/images/step-8.png)](step-8.png) Ainsi, l'outil de débogage d'applications mobiles, qui permet de visualiser les actions, a confirmé que notre logique était correcte. Mais il est assez fastidieux et inutile de sauvegarder le résultat intermédiaire à chaque étape. Nous devrions combiner les étapes en une seule expression : [![Effectuer l'ajustement de la date et de l'heure en une seule étape ](/blog/images/new-action-group.png)](new-action-group.png) Les trois actions initiales sont désactivées et remplacées par une seule action qui inclut une expression complexe. Nous pouvons utiliser la vue de débogueur XPath pour tester cette expression. Nous aurions pu passer facilement d'une vue à l'autre, mais nous avons interrompu la première session de débogage pour modifier l'expression. Maintenant, nous allons exécuter cette nouvelle version dans le simulateur. Cette fois, lorsque le programme s'arrête au point d'arrêt, nous utiliserons le bouton "Entrer dans XPath" pour démarrer le débogage de l'application mobile dans la vue "Débogueur XPath/XQuery" : [![Débogage d'applications mobiles dans la vue d'expression](/blog/images/step-xpath1.png)](step-xpath1.png) La fenêtre d'évaluation XPath/XQuery s'ouvre, et le débogueur commence à évaluer l'expression : [![Évaluation d'une expression lors du débogage d'une application mobile](/blog/images/step-xpath2.png)](step-xpath2.png) Maintenant, nous allons utiliser le bouton "Entrer dans" (ou "Explorer") dans la fenêtre XPath, et continuer ainsi à parcourir l'expression : ![Évaluer l'expression en partant de l'intérieur vers l'extérieur](/blog/images/step-xpath3.png) Les panneaux situés en bas de l'image indiquent le contenu des paramètres fournis lorsque le groupe d'actions a été appelé. La source de la variable "$time" était un nœud JSON contenant des données textuelles, qui a été renvoyé par l'API. Étape suivante : [![Préparation de la chaîne de caractères pour la fonction add-dateTime()](/blog/images/step-xpath4.png)](step-xpath4.png) À l'intérieur de l'expression, la variable T doit toujours respecter la syntaxe de la fonction `add-hours-to dateTime()`. Étape suivante : ![](/blog/images/step-xpath5-1.png) Maintenant, nous avons vraiment abouti au résultat souhaité et l'opération est terminée. Lors de cette exécution, la valeur initiale du paramètre `$time` était 2020-08-03 07:00:00, et la valeur `$adj` utilisée pour l'ajustement était de -07:00. À ce stade, notre résultat est 2020-08-03T00:00:00. La prochaine étape consiste à effectuer un test pour déterminer si un ajustement est nécessaire pour les minutes. Le paramètre "adj" se termine par "00", ce qui fait échouer le test. Dans ce cas, la valeur "T" est remplacée, et la sous-page est affichée [![Présentation du nouveau rapport sur la qualité de l'air](/blog/images/san-fran-aqi.png)](san-fran-aqi.png) Si vous développez des applications pour plusieurs plateformes, vous avez besoin d'un outil qui permette le débogage des applications mobiles. Découvrez MobileTogether [Démonstrations vidéo](https://www.altova.com/fr/mobiletogether/demos#video_Demos), plus [applications de démonstration](https://www.altova.com/fr/mobiletogether/demos), ou même le [manuel en ligne](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) pour une exploration approfondie de toutes les informations. Lorsque vous êtes prêt à vous lancer et à développer vos propres applications mobiles multiplateformes le plus rapidement possible, [Téléchargez le logiciel MobileTogether Designer](https://www.altova.com/fr/mobiletogether/download) pour commencer.