JavaScript : Le débogage et l'analyse de code

Placer un point d'arrêt et jouer le script

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Grâce aux points d'arrêt, vous avancerez pas à pas dans vos scripts tout en assimilant leur fonctionnement.
04:08

Transcription

Placer des points d'arrêt, c'est super. Ça va nous permettre de travailler convenablement. Si vous voulez supprimer vos points d'arrêt, il faudra remonter pour les enlever, tout simplement. Vous pouvez aussi faire un clic droit et désactiver les breakpoints si vous avez vraiment envie de les désactiver. Vous pouvez aussi tous les supprimer directement depuis ce panneau. C'est un clic droit qu'il faudra faire pour pouvoir les gérer. Maintenant imaginons que je vienne placer un point d'arrêt dans mon « pluralize ». Je vais lui mettre un point d'arrêt ici, j'en ai donc un qui apparaît là. On peut agrandir ici pour voir que c'est sur le « return » qu'on l'a mis. Vous pourriez le mettre aussi au-dessus, par contre vous ne pourrez pas le mettre sur « pluralize ». C'est vraiment sur des exécutions de code qu'on sera en capacité de le mettre. Quand on va mettre un point d'arrêt, aucun problème, on recharge le script, et c'est parti. À partir de là, vous pouvez voir que votre point d'arrêt démarre, mais il y a aussi une « Call Stack ». Il y a des appels qui vont être faits à l'intérieur de notre script qui vont arriver jusqu'à la fin. On a également le « Scope » qui est très intéressant et qui va nous permettre d'avoir des informations sur l'objet en cours et ce qui est en train de se passer. On voit qu'actuellement ici on a « tâche » qui va être rendu. En « a » on va avoir « 3 », le nombre de tâches, en « b » on va avoir « tâche », dans « this » vous avez la fonction de pluralisation. On a beaucoup d'informations intéressantes sur les informations de notre fonction et ce que contiennent les paramètres. C'est important aussi. Pendant que vous exécutez votre phase de debug avec des points d'arrêt, vous avez toutes les informations, vous savez comment est en train de fonctionner le script, avec quelles variables, quelles informations lui sont passées à l'intérieur, quelle fonctionnalité est en cours. Mieux que ça : vous allez pouvoir avancer à l'intérieur de vos points d'arrêt. On peut demander au script de jouer, à partir d'ici, et d'avancer dans les fonctionnalités qui se trouvent dans la « Call Stack ». Pour ça, vous allez utiliser ce bouton-là. On va avancer d'une step, on voit que « pluralize » est en train de se terminer. Ensuite on est sur « renderFooter » qui se trouve ici, et, de la même manière, on va avoir le « Scope » d'exécution complet. On connaît les différents paramètres qui sont utilisés. On a le « b », le « c », le « e » ici. Le « b », le « c », le « e » là. On sait exactement à quoi vont correspondre ces informations. On peut continuer à avancer comme ça à l'intérieur. Vous voyez que le « e » qui n'était égal à rien avant, maintenant il est égal à une chaîne de caractères complète qui représente le « footer », donc on va injecter dans le « footer » cette information-là. Ça va vous donner des informations très précises sur ce qui est en train de se passer à l'intérieur d'un script. C'est un des meilleurs outils pour faire du debug parce qu'au fur et à mesure que vous allez avancer dans le debug du code, vous allez voir comment il réagit. On peut continuer comme ça avec le « render » en-dessous. Pareil : on a une information qui est un objet. On va continuer encore à avancer. On a ici le « completed » qui est le filtre qui va être utilisé. C'est le filtre qui va être passé à la fonction au routeur. Vous voyez que c'est encore une information intéressante. Effectivement, si on descend, c'est bien le filtre « Fait » qui est sélectionné. Donc ici le script réagit correctement. On continue encore à avancer, ça se termine. On va avancer jusqu'à la fin du processus, jusqu'à avoir la finalité. On aura parcouru toute la « Call Stack » en ayant eu des informations. C'est une fonctionnalité essentielle pour tout développeur JavaScript, pour pouvoir voir ce qu'il se passe pendant l'exécution du script. C'est vraiment la meilleure chose que vous puissiez utiliser pour apprendre un script et pour débugger. Vous allez pouvoir le mixer avec les « console.log » et tout ce qu'on a vu avant puisqu'ici vous avez de l’information qui se déroule au fur et à mesure. Ça ne vous empêche pas d'aller en console pour voir des choses et pour voir ce qui se passe. Si vous avez des « console.log », des « console.error », etc. qui traînent, ils seront levés également. Vous pouvez combiner tous ces outils pour travailler convenablement et introspecter complètement un script.

JavaScript : Le débogage et l'analyse de code

Prenez en main les techniques et les outils pour améliorer votre code JavaScript. Découvrez Bower, js-beautify, la console de Chrome, les tests unitaires et fonctionnels, etc.

1h29 (26 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :3 mars 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !