SOMMAIRE

00:13 À quoi sert un débogueur ?
00:20 Utilisation dans le cadre de cette formation
00:28 Comment utiliser le débogueur de VSCode ?
00:55 L'onglet débogueur
01:00 La console de débogage
01:03 Les différentes façons de lancer le débogueur
01:15 Affichage de la sortie du programme
01:20 Placer un point d'arrêt (breakpoint)
01:38 Exécution du débogueur
01:45 Voir la valeur des variables
01:57 Le débogueur s'arrête au début de la ligne
02:10 Exécuter le programme pas à pas
02:17 Voir le changement de valeurs des variables en temps réel
02:43 Revenir au début du programme
02:50 Arrêter le débogueur
02:57 Fonctions avancées
03:10 Exécuter le programme jusqu'au prochain point d'arrêt
03:36 Isoler les variables avec le panneau Espion
04:00 Voir la valeur d'une variable en survolant son nom
04:09 Modifier une valeur de variable à la volée
05:01 Les configurations de lancement de Visual Studio Code
05:10 Ouvrir un dossier (projet VSCode)
05:30 Création d'un nouveau fichier JavaScript
05:41 Explication des configurations
05:56 Créer une configuration
06:10 Exécuter une configuration
06:33 Limitation de la configuration par défaut
07:00 Déboguer le fichier ouvert avec ${file}
07:38 Déboguer les exercices de la formation JavaScript de Zéro
07:55 Configuration launch.json : mettre à jour le dépôt
08:20 Comment déboguer un fichier exercices.js
08:43 Ajouter une configuration pour déboguer
09:15 Le débogueur de Google Chrome
09:25 Lancement du serveur web
09:30 Ouverture de la console développeur dans Chrome
09:38 Ouverture du script exercices.js
09:52 Création d'un point d'arrêt dans le script
10:05 Rafraîchir la page web pour activer le point d'arrêt
10:12 Commandes du débogueur
10:25 Le panneau Scope pour les variables
10:46 Particularité des exercices de la formation (console.log)
11:18 Bogue VSCode : attention aux accents !
11:33 Description du bogue des accents
11:40 Exemple du bogue
12:08 Message d'erreur
12:15 Solution au bogue
12:47 Entraînez-vous avec le débogueur !
13:04 Posez vos questions dans les commentaires

DESCRIPTION

Comment utiliser le débogueur pour apprendre le JavaScript ?

Dans cette introduction au débogueur de VSCode du module débutant de ma formation JavaScript, vous allez apprendre le minimum vital pour pouvoir utiliser le débogueur dans un but pédagogique !

LIENS

▶︎ Déboguer avec VSCode (doc en Anglais) :
https://code.visualstudio.com/Docs/editor/debugging

▶︎ Déboguer avec Google Chrome (doc en Anglais) :
https://developers.google.com/web/tools/chrome-devtools/javascript

▶︎ Découvrez du contenu supplémentaire gratuit sur ma chaîne YouTube, abonnez-vous :
https://www.youtube.com/channel/UCMzJVrWeaKUotLPWTdx6HuQ?sub_confirmation=1

▶︎ Suivez-moi sur Twitter :
https://twitter.com/jeremymouzin

Module débutant

4h de contenu pour vous faire une idée de la qualité de ma formation.