Surveillance de l’exécution de JavaScript

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

• Suivre les variables JavaScript
  
• Manipuler les variables JavaScript
  

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Si vous avez l’habitude de dépanner JavaScript, vous connaissez probablement la commande console.log(). C’est comme un ami en interne qui vous dit ce qu’il se passe pendant l’exécution de JavaScript. Il vous montre ce que font les variables à différents stades du script. Et si je vous disais qu’il existe un moyen plus rapide et plus « propre » d’obtenir ces informations, un ami encore meilleur ? DevTools Watch est ce nouvel ami. Découvrons-le.

Vidéo de démonstration Trail Together

Vous souhaitez être guidé pas à pas par des experts pendant que vous travaillez sur cette étape ? Regardez cette vidéo qui fait partie de la série Trail Together sur Trailhead Live.

(Ce clip commence à 39 min 54 s, au cas où vous voudriez revenir en arrière et regarder à nouveau le début de l’étape.)

Utilisation de la fonctionnalité Watch

Vous savez maintenant comment définir des points de contrôle et voir le flux du code et les valeurs des variables. Cependant, il existe un meilleur moyen de surveiller ces variables et leurs valeurs à certains moments durant l’exécution du code. Utilisez Watch dans le volet JavaScript Debugging (Débogage JavaScript).

Définition du décompte par deux dans l’application Solutions

Vous avez vu l’application Solutions ajouter une unité au décompte à chaque fois que vous cliquez sur +1. Maintenant, utilisez l’option de contrôle pour augmenter le nombre de deux.

• Actualisez la page dans votre navigateur. Vos points de contrôle devraient toujours être affichés.
  
• Si ce n’est pas déjà fait, ouvrez display.js dans DevTools.
  
• Recherchez la fonction handleAugmentorChange(event).
  
• Dans le volet JavaScript Debugging (Débogage JavaScript), développez Watch et cliquez sur Add watch expression (Ajouter une expression de surveillance) .
  

Saisissez event.target.value et appuyez sur Entrée.

Watch affiche : event.target.value:<not available> (non disponible)

Définissons un point de contrôle et déclenchons l’événement.

1. Cliquez sur le numéro de ligne pour this.augmentor = event.target.value; pour définir un point de contrôle.
   
2. Dans l’application Solutions, sous Control Option (Option de contrôle), sélectionnez 2. Watch montre maintenant que la valeur d’event.target.value est « 2 ».
   

Puisque le gestionnaire d’événements handleAugmentorChange est en pause, event.target.value est actif et Watch affiche sa valeur.

3. Dans le volet JavaScript Debugging (Débogage JavaScript), ajoutez this.augmentor à Watch.
   

Notez que la valeur de this.augmentor est toujours 1. Cette ligne de code n’a pas encore été exécutée.

4. Cliquez sur Step (Étape) () pour exécuter cette ligne et passer à la ligne suivante.
   

L’exécution est maintenant suspendue après la ligne avec le point de contrôle et Watch affiche : event.target.value:"2"this.augmentor:"2"

5. Cliquez sur Resume script execution (Reprendre l’exécution du script) . Notez que les boutons de contrôle de l’application Solutions sont passés à -2 et +2.
   

Observation du décompte par deux dans l’application Solutions

Dans l’application Solutions, sous Display (Affichage), le nombre est actuellement zéro. Observez comment les variables changent dans le code lorsque vous cliquez sur le bouton +2 dans l’application Solutions.

1. Cliquez sur +2. Le point de contrôle suspend l’exécution du code à la première ligne de la fonction handleIncrement. Maintenant, Watch affiche : event.target.value:undefined this.augmentor:"2"

2. Ajoutez operand et this.counter à Watch. La valeur Operand (opérande) n’est pas définie et this.counter est zéro.
   

3. Cliquez sur Resume script execution (Reprendre l’exécution du script) . Attendez… le point de contrôle suivant ne s’est pas interrompu pour que nous puissions voir la valeur du changement de l’opérande. Dans l’application Solutions, le nombre est désormais 2. Recommençons. Le script devrait s’interrompre cette fois.
   
4. Cliquez sur +2. Maintenant, Watch affiche :
   

   event.target.value: undefined
   this.augmentor: "2"
   operand: undefined
   this.counter: "02"
   this.counter

5. Cliquez sur Resume script execution (Reprendre l’exécution du script) . Lorsque le script s’interrompt à nouveau, Watch affiche :
   

   event.target.value: undefined
   this.augmentor: "2"
   operand: "2"
   this.counter: "02"

6. Cliquez sur Resume script execution (Reprendre l’exécution du script) . Vous avez réussi ! Mais… regardez la valeur Count (Décompte) dans l’application Solutions.
   

Pourquoi 22 au lieu de 4 ? Il semble que l’application Solutions concatène les valeurs au lieu de les additionner. C’est là que Watch devient intéressant.

Surveillance des expressions et des propriétés par Watch

Vérifions le type de données de la variable que le bouton +2 modifie.

1. Ajoutez typeof operand à Watch. L’opérateur typeof operand n’est pas défini.
   
2. Cliquez sur +2. Watch affiche :
   

   event.target.value: undefined
   this.augmentor: "2"
   operand: undefined
   this.counter: "022"
   typeof operand: "undefined"

3. Cliquez sur Resume script execution (Reprendre l’exécution du script) .
   

l’enregistrement est bien là ! La variable d’opérande est définie comme une chaîne.

Vous pouvez constater la puissance de Watch en matière de dépannage. Nous allons ensuite identifier le problème et trouver un moyen de le résoudre.

La console

Pour examiner ce problème plus en détail, utilisez la console DevTools.

1. Actualisez la page dans votre navigateur. Vos points de contrôle et éléments surveillés doivent toujours être affichés.
   
2. Dans l’application Solutions, cliquez sur +1.
   
3. Dans Watch, vérifiez les valeurs de this.augmentor et this.counter.
   

this.counter et this.augmentor semblent tous deux être des nombres, mais confirmons cela.

4. Ajoutez typeof this.counter et typeof this.augmentor à Watch. Effectivement, Watch montre bien que ce sont actuellement des nombres.
   
5. Cliquez sur Step (Étape) pour passer à la ligne suivante.
   
6. 
   

Tous sont des chiffres. Jusqu’ici, tout va bien.

7. Cliquez sur Step (Étape) pour passer à la ligne suivante.
   

this.counter est passé de 0 à 1. Répétons cette étape pour voir ce qu’il se passe.

1. Cliquez sur Resume script execution (Reprendre l’exécution du script) . Dans l’application Solutions, le nombre est 1.
   
2. Dans l’application Solutions, cliquez sur +1.
   
3. Parcourez le code et observez que les nombres sont toujours des nombres et que this.counter est maintenant 2, comme il se doit.
   Tout semble fonctionner comme prévu.
   

Utilisation de l’option de contrôle pour découvrir comment elle affecte la valeur

1. Cliquez sur Resume script execution (Reprendre l’exécution du script) . Dans l’application Solutions, le nombre est désormais 2.
   
2. Dans l’application Solutions, sous Control Option (Option de contrôle), sélectionnez 2. Le script s’exécute jusqu’à ce qu’il atteigne le point de contrôle dans la fonction handleAugmentorChange.
   

Le script s’est arrêté dans la fonction, mais la ligne de code du point de contrôle n’a pas encore été exécutée. Notez que event.target.value ressemble à une chaîne.

3. Ajoutez typeof event.target.value à Watch.
   

Et en effet, c’en est une. Cela confirme que l’application Solutions concatène les valeurs au lieu de les additionner.

Utilisons la console pour manipuler les valeurs et voyons ce qu’il se passe.

1. Cliquez sur l’onglet Console.
   
2. Dans la console, saisissez event.target.value, puis appuyez sur Entrée.
   

La console renvoie « 2 ». Notez les guillemets autour du 2, qui désignent une chaîne. Comme vous êtes toujours arrêté au point de contrôle, vous pouvez utiliser les variables dans leur état actuel.

3. Saisissez this.augmentor = event.target.value, puis appuyez sur Entrée. Encore une fois, la console renvoie « 2 ». Ce n’est pas ce qui était prévu. D’une manière ou d’une autre, le code a modifié this.augmentor pour le faire passer d’un nombre à une chaîne. Essayons de trouver une solution.
   
4. Saisissez this.augmentor = 1, puis appuyez sur Entrée pour le transformer à nouveau en nombre.
   
5. Saisissez this.augmentor = parseInt(event.target.value), puis appuyez sur Entrée. La valeur passe à 2 et reste un nombre. Nous savons donc maintenant comment corriger le code.
   
6. Saisissez this.augmentor = 1 pour restaurer la valeur d’origine.
   
7. Revenez au panneau Sources.
   
8. Cliquez sur Step (Étape) pour passer à la ligne suivante et vérifiez la valeur de this.augmentor.
   

C’est une chaîne.

Mise en pause de cette unité

Faites défiler l’écran jusqu’à la fin de cette unité et effectuez le défi pratique. Lorsque vous avez terminé le défi, revenez ici pour appliquer la solution dans votre Trailhead Playground.

Reprise de cette unité

Vérifions maintenant que l’application Solutions fonctionne comme prévu.

1. Actualisez la page dans votre navigateur.
   
2. Dans l’application Solutions, sous Control Option (Option de contrôle), sélectionnez 2. Le script s’exécute jusqu’à ce qu’il atteigne le point de contrôle dans la fonction handleAugmentorChange.
   

3. Cliquez sur Step (Étape) pour passer à la ligne suivante.
   
4. Vérifiez la valeur de this.augmentor.
   

C’est toujours un nombre ! Excellent.

5. Cliquez sur Resume script execution (Reprendre l’exécution du script) .
   
6. Dans l’application Solutions, cliquez sur +2.
   
7. Cliquez sur Step (Étape) pour passer à la ligne suivante. Watch affiche :
   

   event.target.value: undefined
   this.augmentor: 2
   operand: 2
   this.counter: 0
   typeof operand: "number"
   typeof this.counter: "number"
   typeof this.augmentor: "number"

8. Cliquez sur Step (Étape) (). Watch affiche :
   

   event.target.value: undefined
   this.augmentor: 2
   operand: 2
   this.counter: 2
   typeof operand: "number"
   typeof this.counter: "number"
   typeof this.augmentor: "number"
   this.counter

9. Cliquez sur Resume script execution (Reprendre l’exécution du script) . Dans l’application Solutions, le nombre est 2.
   
10. Dans l’application Solutions, cliquez sur +2.
    
11. Cliquez sur Resume script execution (Reprendre l’exécution du script) . Le script s’exécute jusqu’à ce qu’il atteigne le point de contrôle conditionnel, puis s’arrête. Notez que this.counter est toujours 2.
    
12. Cliquez sur Resume script execution (Reprendre l’exécution du script) et notez que le nombre dans l’application Solutions est 4, comme il se doit. Formidable !
    

Alors, que pensez-vous de votre nouveau meilleur ami DevTools ? Ce module ne fait qu’effleurer la façon dont DevTools peut vous aider à dépanner vos composants Web Lightning. Assurez-vous de consulter les ressources pour trouver d’autres idées.

Ressources

• Chrome DevTools : Référence de débogage JavaScript
• Chrome DevTools : Mise en pause de votre code avec des points de contrôle
• Blog des développeurs Salesforce : Amélioration de vos compétences LWC - Partie 2