Module 2 — Chrome DevTools et VS Code
Maîtrisez l'arsenal d'investigation moderne des développeurs : explorez les fonctionnalités avancées de Chrome DevTools, du débogueur VS Code et de l'inspection mémoire. Configurez des points d'arrêt conditionnels, analysez la pile d'appels (Call Stack) en direct et formulez des hypothèses rigoureusement vérifiables.
Présentation des outils de débogage
Identifier les grands outils professionnels : DevTools, VS Code, Postman, MySQL Workbench, et comprendre où intervenir dans l'architecture.
Maîtriser les outils Chrome DevTools
Explorer les 8 panneaux essentiels : Elements, Console, Sources, Network, Application, Performance, Memory et Security.
Utilisation de la console JavaScript
Exploiter l'environnement interactif : types de messages, inspection d'objets, console.dir, count, time, trace et filtres de recherche.
Comprendre les erreurs et les Stack Traces
Déchiffrer la trace de pile d'appels, distinguer le lieu de survenue de la cause racine et diagnostiquer les erreurs asynchrones.
Utilisation de console.log, error et table
Pratiques de journalisation professionnelle : messages structurés, tableaux console.table, groupes hiérarchiques et journalisation backend Node.js.
Débogage avec les Breakpoints
Suspendre l'exécution avec précision : points d'arrêt sur ligne, breakpoints conditionnels, logpoints et instruction debugger.
Inspection des variables et des expressions
Examiner le scope local, global et closure, configurer des expressions de surveillance Watch et tester des hypothèses en direct.
Comprendre la Call Stack (pile d'appels)
Principe LIFO de la pile d'appels, navigation entre stack frames, distinction Call Stack vs Stack Trace et gestion des récursions infinies.
Exécution pas à pas : Step Into, Over et Out
Prendre le contrôle total du flux d'exécution : entrer dans une fonction, l'enjamber ou en sortir pour traquer les données défaillantes.
Débogueur de Visual Studio Code
Débogage backend dans VS Code : configuration de launch.json, inspection de requêtes Express avec Postman, attachement de processus.
TP Final : Diagnostic complet DevTools & VS Code
Cas pratique professionnel complet : application multi-couches e-commerce avec calculs erronés, produit inexistant et gestion d'erreurs HTTP.