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
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 la touche Entrée.
Watch affiche :event.target.value:<not available>
(non disponible)
Définissons un point de contrôle et déclenchons l’événement.
- Cliquez sur le numéro de ligne pour
this.augmentor = event.target.value;
pour définir un point de contrôle.
- 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.
- Dans le volet JavaScript Debugging (Débogage JavaScript), ajoutez
this.augmentor
à Watch.
Notez que la valeur dethis.augmentor
est toujours 1. Cette ligne de code n’a pas encore été exécutée.
- Cliquez sur Step over (Passer) 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"
- 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.
- 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"
- Ajoutez
operand
etthis.counter
à Watch. La valeuroperand
(opérande) n’est <pas disponible> etthis.counter
est zéro.
Watch affiche :event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:0
- 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.
- Cliquez sur +2.
Watch affiche désormais :event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"02"
- 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"
- 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 le texte au lieu d’additionner les nombres. 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.
- Ajoutez
typeof operand
à Watch. L’opérateurtypeof operand
n’est pas défini.
- Cliquez sur +2.
Watch affiche :event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:<not available>
- Cliquez sur Resume script execution (Reprendre l’exécution du script) .
Watch affiche :event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:"string"
Et voilà ! 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.
- Actualisez la page dans votre navigateur. Vos points de contrôle et éléments surveillés doivent toujours être affichés.
- Dans l’application Solutions, cliquez sur +1.
- Dans Watch, vérifiez les valeurs de
this.augmentor
etthis.counter
.
Watch affiche :event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
this.counter
etthis.augmentor
semblent tous deux être des nombres, mais vérifions-le.
- Ajoutez
typeof this.counter
ettypeof this.augmentor
à Watch.
Oui, Watch montre qu’il s’agit actuellement de nombres.event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
typeof this.counter:"number"
typeof this.augmentor:"number"
- Cliquez sur Step over (Passer) pour passer à la ligne suivante.
Watch affiche :event.target.value:undefined
this.augmentor:1
operand:1
this.counter:0
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
Ce sont tous des nombres. Jusqu’ici, tout va bien.
- Cliquez sur Step over (Passer) pour passer à la ligne suivante.
Watch affiche :event.target.value:undefined
this.augmentor:1
operand:1
this.counter:1
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
this.counter
est passé de 0 à 1. Répétons cette étape pour voir ce qu’il se passe.
- Cliquez sur Resume script execution (Reprendre l’exécution du script) . Dans l’application Solutions, le nombre est 1.
- Dans l’application Solutions, cliquez sur +1.
- 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
- Cliquez sur Resume script execution (Reprendre l’exécution du script) . Dans l’application Solutions, le nombre est désormais 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é à l’intérieur de la fonction, mais la ligne de code du point de contrôle n’a pas encore été exécutée. Notez queevent.target.value
ressemble à une chaîne.
- Ajoutez
typeof event.target.value
à Watch.event.target.value:undefined
this.augmentor:1
operand:1
this.counter:1
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
typeof event.target.value:"string"
En effet, il s’agit d’une chaîne. Cela confirme que l’application Solutions concatène le texte au lieu d’additionner les nombres.
Utilisons la console pour manipuler les valeurs et voyons ce qu’il se passe.
- Cliquez sur l’onglet Console.
- Dans la console, saisissez
event.target.value
, puis appuyez sur la touche 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.
- 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.
- Saisissez
this.augmentor = 1
, puis appuyez sur Entrée pour le transformer à nouveau en nombre.
- 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.
- Saisissez
this.augmentor = 1
pour restaurer la valeur d’origine.
- Revenez au panneau Sources.
- Cliquez sur Step over (Passer) pour passer à la ligne suivante et vérifiez la valeur de
this.augmentor
.
Watch affiche :event.target.value:"2"
this.augmentor:"2"
operand:<not available>
this.counter:2
typeof operand:"undefined"
typeof this.counter:"number"
typeof this.augmentor:"string"
typeof event.target.value:"string"
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.
- Actualisez la page dans votre navigateur.
- 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.
- Cliquez sur Step over (Passer) pour passer à la ligne suivante.
- Vérifiez la valeur de this.augmentor.
C’est toujours un nombre ! Excellent.
- Cliquez sur Resume script execution (Reprendre l’exécution du script) .
- Dans l’application Solutions, cliquez sur +2.
- Cliquez sur Step over (Passer) 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"
typeof event.target.value:"undefined"
- Cliquez sur Step over (Passer) .
Watch affiche :event.target.value:undefined
this.augmentor:2
operand:2
this.counter:2
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"string"
typeof event.target.value:"undefined"
- Cliquez sur Resume script execution (Reprendre l’exécution du script) . Dans l’application Solutions, le nombre est 2.
- Dans l’application Solutions, cliquez sur +2.
- 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.
- 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