Bonjour et bienvenue dans ce cours sur le débogage. Je m’appelle Thomas Dimnet, je suis moi-même développeur et je suis aussi mentor chez OpenClassrooms.
Ce cours a pour objectif de vous apprendre à déboguer de manière efficace.
Nous verrons notamment comment :
résoudre des bugs d’intégration, autrement dit des bugs liés au HTML et au CSS ;
analyser et résoudre des bugs côté JavaScript, DOM et API ;
tirer parti des outils à notre disposition, tels que l’inspecteur, la console, le déboguer et l’onglet réseau.
et enfin comment déboguer une application.
Pour bien saisir l’ensemble de ce cours et appliquer les concepts que nous allons voir, il vous est nécessaire d’être familier avec :
Le HTML et le CSS. Nous en aborderons les bugs d’intégration dans la première partie ;
Le JavaScript, le DOM et les requêtes XHR. Les chapitres 2 et 3 sont dédiés à ce langage.
Git et Github. Le projet fil rouge ainsi que l’intégralité des exemples seront présents sur Github ; nous nous servirons de Git pour changer de branche à chaque chapitre. :)
Familiarisez-vous avec le contenu du cours
Dans ce cours, vous trouverez :
des vidéos
en début de certains chapitres, elles vous permettront de découvrir des concepts clés liés au débogage.
au sein même des chapitres. Nous appelons ces vidéos des “screencasts”. Ils me permettront de vous montrer des exemples concrets.
du texte qui permettra
de présenter les notions en détails et de donner des conseils.
de donner des exemples des concepts que je présente
de partager des liens vers des ressources complémentaires telles que des articles de blog.
des quiz qui vous permettront de valider les connaissances acquises durant le cours.
et enfin un projet fil rouge qui nous servira de cas d’application.
Comme toujours, il est important que vous pratiquiez tout au long de ce cours. C’est grâce à ça que vous allez forger vos compétences !
Appliquez les concepts clés grâce au projet fil rouge
En plus des snippets (ou fragments, en français) de code et des exemples d’applications que vous allez avoir durant ce cours, nous allons travailler sur un projet :
Le site Façadia, qui permet de suivre des façades par le biais de capteur. Ces capteurs nous donnent des informations tels que le degré d’humidité, les coordonnées géographiques. Grâce à l’API Weathercast et aux coordonnées GPS de chaque capteur, nous récupérons les données météorologiques pour chaque façade.
Le projet comporte quatre pages :
une page de connexion où on va devoir rentrer son adresse e-mail et son mot de passe ;
la page d’accueil, qui comprend 34 capteurs récupérées via une requête HTTP ;
la page “façade”, qui donne des détails sur une façade ;
la page d’ajout d’une façade ; elle comprend un formulaire.
Ce dernier va être le fil rouge de notre cours. À chaque chapitre, je reviendrai dessus pour mettre en application les méthodes de résolution de bug que vous découvrirez dans ce cours.
Prêt à devenir des pros du débogage ? À tout de suite au prochain chapitre !
