Introduction aux Points d'arrêt et Pas à Pas en Javascript

Le débogage avancé de JavaScript : Exécuter un script pas-à-pas
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Javascript
Revoir le teaser Je m'abonne
4,5
Transcription

49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Apprendre à utiliser les points d'arrêt et l'exécution pas à pas en Javascript.
Comprendre le fonctionnement des différentes commandes de débogage.

Découvrez comment utiliser les points d'arrêt et le pas à pas en Javascript pour déboguer votre code efficacement dans les navigateurs modernes.

Le débogage est une étape cruciale du développement de logiciels. Dans cette leçon, nous explorons l'utilisation des points d'arrêt et de l'exécution pas à pas dans un environnement Javascript. Vous apprendrez à utiliser l'instruction DEBUGGER pour insérer des points d'arrêt et comment le navigateur s'arrête automatiquement lorsqu'il les rencontre. Nous allons aussi découvrir comment contrôler l'exécution d'un programme grâce aux outils de débogage des navigateurs.

Nous détaillerons l'usage des boutons STEP OVER, STEP INTO, et STEP OUT dans le panneau des sources. En outre, nous verrons comment surveiller les valeurs des variables et créer des points d'arrêt dynamiques. Finalement, nous aborderons les options de pause sur exceptions pour améliorer votre workflow de développement.

Voir plus
Questions réponses
Que fait l'instruction DEBUGGER en Javascript ?
L'instruction DEBUGGER crée un point d'arrêt où l'exécution du programme est automatiquement suspendue, permettant ainsi aux développeurs d'examiner l'état actuel du programme.
Comment peut-on contrôler l'exécution d'un programme en mode pas à pas ?
En utilisant les boutons STEP OVER, STEP INTO et STEP OUT dans le panneau des sources du navigateur, on peut exécuter le code ligne par ligne ou entrer et sortir des fonctions appelées.
Qu'est-ce qu'un point d'arrêt dynamique et comment le créer ?
Un point d'arrêt dynamique est un point d'arrêt créé manuellement par le développeur en cliquant sur le numéro de ligne dans le panneau des sources. Il permet de mettre en pause l'exécution du programme à des endroits spécifiques sans modifier le code source.
Le point d'arrêt et le pas à pas sont des fonctions essentielles d'un outil de débogage. Sous Javascript, on utilisera l'instruction DEBUGGER pour créer un point d'arrêt. Voyons comment cela se passe. Ouvrons notre fichier test4.js et insérons un point d'arrêt ici. Lorsque le programme s'exécutera, son exécution sera arrêtée à cette instruction. L'instruction DEBUGGER n'est pas une instruction normée, mais elle est disponible dans la plupart des navigateurs. Je vais mettre un autre point d'arrêt ici pour les besoins de la démonstration. Je sauvegarde, j'ouvre mon fichier html4 et je le charge dans mon navigateur. Ici il ne se passe rien, c'est normal. Pour que cela fonctionne, il faut que ma console Javascript soit démarrée. Je la démarre. Je recharge la page. Vous constatez que je ne suis plus sur l'onglet console du debugger qui est situé ici. Mais sur l'onglet sources. Dans l'onglet sources, mon programme est affiché. La ligne bleue symbolise là où s'est arrêté mon programme, c'est à dire sur l'instruction DEBUGGER, c'est mon point d'arrêt. Les boutons situés en haut du panel de droite me permettent de contrôler l'exécution de mon programme. Ce bouton, le deuxième à partir de la gauche, me permet d'exécuter mon programme pas à pas. Je clique et vous constatez ici que j'ai sauté une ligne. Je fais du pas à pas. Une chose intéressante, si je place mon curseur sur produit 1 par exemple, vous constatez que le debugger m'affiche la valeur des propriétés de mon objet. La propriété HT, nom, TTC, ici j'ai une propriété un peu bizarre qui s'appelle PROTO. Elle m'indique le nom de la classe dont l'objet est dérivé. Le bouton situé ici, en haut à gauche, me permet de poursuivre l'exécution de mon programme. Jusqu'au prochain point d'arrêt, ou s'il n'y en a pas, jusqu'à la fin de mon programme. Je clique, vous voyez j'ai sauté directement jusqu'au prochain point d'arrêt, c'est à dire jusqu'à la prochaine instruction de debugger. Si je reclique sur le bouton, l'exécution se poursuit jusqu'à la fin de mon programme. Si je vais dans l'onglet console, je vois que mes messages se sont bien affichés. Il peut être intéressant, lorsque je fais du pas à pas, de voir en même temps la console, pour voir les messages qui s'affichent en temps réel. Pour ce faire, je peux utiliser ce bouton SHOW DRIVER pour faire apparaître la console. Le pas à pas n'a pas concerné cette fonction, ceci parce que j'ai utilisé le bouton STEP OVER. STEP OVER veut dire que je passe par dessus les fonctions appelées. Je peux faire autrement, je recharge ma page, je fais un peu de pas à pas, voilà. Ici j'aimerais bien aller voir comment ça se passe à l'intérieur de ma fonction. Donc je ne vais plus utiliser ce bouton, le bouton STEP OVER, mais le bouton STEP INTO. Celui-ci, STEP INTO NEW FUNCTION CALL. Je clique, et là vous constatez que mon point d'arrêt est situé dans la fonction. Je peux également surveiller la valeur de mes propriétés. Je n'ai pas encore exécuté cette ligne, c'est pour ça que je n'ai rien. UNDEFINED. Si je clique sur ce bouton, le bouton STEP OUT, je vais non pas poursuivre l'exécution de mon programme dans la fonction, mais mon prochain point d'arrêt sera situé dans la fonction appelante. Je clique sur le bouton, vous voyez, je suis revenu dans ce qu'on peut appeler le programme principal qui est le programme appelant. Je peux créer des points d'arrêt dynamiquement. Je vais ici, et je clique sur un numéro de ligne. Par exemple, si je clique ici, voilà, je crée un point d'arrêt dynamique. Je clique maintenant sur le bouton Résume, et vous constatez que je me suis arrêté à la ligne 18. Si vous voulez supprimer le point d'arrêt, vous récliquez dessus. Vous pouvez aussi désactiver temporairement les points d'arrêt en utilisant ce bouton. DESACTIVATE BREAKPOINTS. Je poursuis. Vous constatez que la déactivation n'a pas concerné que mon point d'arrêt dynamique, mais aussi les points d'arrêt spécifiés avec l'instruction DEBUGGER. Pour réactiver les points d'arrêt, appuyez de nouveau sur le bouton. Vous pouvez également créer des points d'arrêt à l'aide de ce bouton. PAUSE ON EXCEPTIONS, je clique dessus. Désormais, si lors de l'exécution de mon programme, une erreur est détectée, mon programme sera mis en pause à l'endroit où l'erreur est advenue. Cela ne concerne pas les erreurs détectées à l'intérieur d'un bloc d'instructions traité par TRY-CATCH. Pour ce faire, il faudrait que je coche cette option. PAUSE ON COST EXCEPTIONS. PAUSE sur les exceptions attrapées. Nous aurons l'occasion dans d'autres vidéos d'utiliser le point d'arrêt et le pas à pas.

Programme détaillé de la formation

4 commentaires
4,5
4 votes
5
4
3
2
1
nicolas.braud
Il y a 1 year
Commentaire
Très bonne formation ; j'ai eu des difficultés avec la partie AJAX pour installer les hôtes virtuels d'un point de vue technique, mais on peut y arriver quand même à l'aide de tuto. les documents présentés en slide seraient appréciés pour les utiliser a posteriorir.
fguibert47
Il y a 2 years
Commentaire
Bonjour, Excellente formation. Très bien faite. Alain Beauvois est un très bon professeur !! Elle correspond tout à fait à ce que j'attendais. Merci.
amercadie
Il y a 2 years
Commentaire
Excellente formation. Des cours progressifs et très clairs.
david.coilot
Il y a 2 years
Commentaire
très bonne formation !!
Nos dernières formations JavaScript
  • Apprendre Vue JS 3
    Découvrir
    Apprenez à créer des applications web modernes avec notre formation "Apprendre Vue JS 3". Rejoignez-nous et maîtrisez ce puissant framework JavaScript ! 🚀 #VueJS #FormationWeb #Développement
    11h47 91 leçons
  • Apprendre JavaScript ES6 - Les fondamentaux
    Découvrir
    Apprendre les fondamentaux du langage de programmation JavaScript
    4h22 41 leçons 3,50 / 5
  • Savoir programmer en Node.js
    Découvrir
    Apprendre à programmer en Node.js
    2h14 15 leçons