Tester et déboguer les composants de code

Lorsque vous développez des composants plus complexes, vous devrez peut-être tester et déboguer leur logique de différentes manières interactives. L’atelier de test de composant Power Apps est un utilitaire pratique qui vous permet de tester différentes données et entrées de contexte pour vous assurer que votre composant fonctionne correctement. De plus, comme vous créez des composants de code avec des technologies web standard telles que TypeScript, CSS et HTML, vous disposez des nombreux utilitaires proposés au moyen de cet écosystème, comme les fonctionnalités de débogage client disponibles dans la plupart des navigateurs modernes.

Tester et déboguer votre composant de code dans l’atelier de test de composant Power Apps

L’atelier de test de composant Power Apps est un utilitaire créé par Microsoft qui vous permet d’afficher rapidement un composant Power Apps dans un environnement localisé. Si vous avez effectué l’exercice de ce module sur l’écriture d’un composant de code, vous avez déjà vu cet utilitaire à l’œuvre. Vous pouvez démarrer un atelier de test local à partir d’un projet de composant Power Apps à l’aide de la commande npm start.

Une fois l’atelier de test démarré, votre composant s’affiche dans une fenêtre de navigateur, comme celle que vous avez créée dans l’exercice précédent.

Entrées de contexte

Dans l’atelier de test, vous pouvez alimenter votre composant avec diverses entrées afin de spécifier son rendu (ce qui est utile pour garantir que le composant s’affiche correctement dans différents contextes d’affichage).

Dans le menu déroulant Entrées de contexte, vous pouvez sélectionner un Facteur de forme tel que Web, Tablette et Téléphone. Vous pouvez également fournir des champs de largeur et de hauteur explicites pour visualiser le rendu du composant dans différentes dimensions.

Entrées de données

Le menu déroulant Entrées de données vous permet non seulement de vous assurer que le composant fonctionne comme prévu lorsque différents paramètres de données sont fournis, mais aussi de déterminer le rendu du composant selon le type spécifié dans un champ donné.

Si votre composant est un composant de jeu de données, vous pouvez charger des fichiers CSV avec des données fictives. Vous pouvez exporter un fichier CSV à partir d’un exemple d’environnement cible sur lequel vous créez votre composant ou en créer un.

Dans l’exemple précédent, si vous souhaitiez créer un fichier CSV, il devait ressembler à l’exemple suivant :

nom, telephone1, adresse1_ville

Joe, 123-555-0100, Seattle

Mary, 123-555-0101, Atlanta

Steve, 123-555-0102, Redmond

Une fois le fichier CSV chargé avec succès, le composant affiche ses enregistrements et, comme avec vos contrôles de propriétés, vous pouvez attribuer différents types comme spécifié par le groupe de types correspondant du composant (défini dans le fichier ControlManifest.Input.xml du composant).

Déboguer un composant de code à l’aide des fonctionnalités de débogage du navigateur

La plupart des navigateurs modernes intègrent diverses fonctionnalités de débogage. Microsoft Edge, Google Chrome, Mozilla Firefox et Apple Safari proposent chacun des outils de développement intégrés qui garantissent des expériences de débogage interactives. Pour en savoir plus sur chaque navigateur, consultez les liens suivants :

Pour cet exercice, vous allez utiliser Microsoft Edge. Avec un navigateur Microsoft Edge actif ouvert, démarrez DevTools de Microsoft Edge en appuyant sur la touche F12 de votre clavier.

Inspecter votre code HTML à l’aide du volet Éléments

Dans DevTools, le premier onglet disponible après Bienvenue est Éléments. Cliquez sur Éléments, puis le volet Éléments vous permet de visualiser le code HTML s’affichant sur la page. Vous pouvez accéder à l’endroit où votre contrôle s’affiche à l’aide de la fonctionnalité Inspecter, accessible de trois manières :

1. Cliquez sur l’icône Sélectionner un élément sur la page pour l’inspecter en haut du volet Éléments à gauche, puis sélectionnez l’élément dans l’atelier de test de composant. Cette action sélectionne cet élément dans votre visualiseur à droite (voir 3 dans le schéma ci-dessous).

   

2. Mettez en surbrillance un élément du composant et cliquez dessus avec le bouton droit, puis sélectionnez Inspecter.

   

3. Sélectionnez un élément dans le volet Éléments.

Inspecter les journaux de console et exécuter un script dans le volet Console

Un mécanisme fréquent pour fournir un contexte de débogage dans le script client consiste à utiliser la méthode console.log(). Si vous souhaitez fournir une journalisation à l’intérieur de la logique de votre composant, vous pouvez utiliser cette méthode. Ces journaux s’affichent dans le volet Console DevTools chaque fois qu’ils sont exécutés, ce qui fournit un moyen précieux de suivre la logique à mesure qu’elle s’exécute dans votre composant. L’image suivante illustre des exemples de journaux de l’atelier de test :

Vous pouvez également exécuter votre propre script à partir de la console. Cette méthode peut être utile pour tester divers appels de méthode et la logique dans le cadre d’un environnement de production.

Définir les points d’arrêt du débogueur dans le volet Sources

L’un des utilitaires les plus précieux de DevTools permet de définir des points d’arrêt de débogage dans votre code, afin de pouvoir inspecter les variables et le flux d’implémentation de votre méthode. Cet exemple définit un point d’arrêt dans le fichier index.ts que vous avez développé dans le cadre de votre composant Power Apps. Dans l’exemple suivant, vous allez vous arrêter à un point d’arrêt lors de chaque exécution de la méthode refreshData.

Si vous cliquez sur le bouton de votre contrôle, ce point d’arrêt est atteint, ce qui vous permet de parcourir manuellement la logique du gestionnaire d’événements. En outre, vous pouvez inspecter des valeurs, telles que celles ayant été modifiées, comme illustré dans l’image suivante :