Ce cours explique à l’apprenant pourquoi et comment installer les principaux outils de débogage pour le développement web côté front-end.
Il détaille l’utilisation des outils intégrés à chaque navigateur (DevTools), ainsi que l’installation et l’usage d’extensions spécifiques pour inspecter, modifier et tester le code HTML, CSS et JavaScript d’une page web.
À l’issue du cours, l’apprenant saura ouvrir, configurer et exploiter les outils de debug front sur Chrome, Firefox et d’autres navigateurs modernes.
Contenu du cours
-
Qu’est-ce qu’un outil de debug front ?
-
Présentation des DevTools (outils intégrés à Chrome, Firefox…)
-
Fonctions principales des DevTools : inspection, console, sources, réseaux, performance
-
Installation d’extensions de debug front (React Developer Tools, Vue.js Devtools, etc.)
-
Exemples concrets d’utilisation (déboguer du HTML/CSS/JS, simuler un mobile…)
-
Activité pratique (ouvrir, utiliser, illustrer les outils de debug)
-
Quiz de validation
- Enseignant: Reda DERRAZ