Dans ce chapitre, vous allez revenir sur les outils qui ont été abordés durant ce cours (je ferai un bref récapitulatif de leur utilité) puis enfin, nous nous servirons de ces outils pour résoudre notre bug.
Utilisez les outils à votre disposition
Chaque bug dispose d’un outil qui lui est adapté et qui permet de l’observer et de vous aider à le résoudre plus facilement.
L’inspecteur est souvent utilisé pour le débogage du HTML et du CSS. Vous pouvez voir les propriétés CSS qui sont utilisées, celles qui sont surchargées. Vous pouvez aussi voir le modèle de boite qui s’applique.
La console va vous permettre de déboguer du code JavaScript. Elle peut vous permettre d’exécuter des fonctions, de récupérer des variables. Vous pouvez aussi depuis votre code utiliser des console.log pour suivre l’état de votre application.
Le débogueur est un outil dédié au débogage du JavaScript. Grâce à des breakpoints, vous allez pouvoir suivre l’état de votre code, les variables et valeurs contenues dans les fonctions exécutées, etc. Vous pouvez aussi bien l’utiliser dans le navigateur qu’avec l’extension VsCode que nous avons vue durant le cours.
L’onglet Network vous permet d’en savoir un peu plus sur les requêtes et réponses HTTP reçues quand vous consultez une page. Vous pouvez voir le poids des fichiers reçus, les requêtes réalisées, etc.
Réfléchissez à l’implémentation de la solution
Une fois que vous avez isolé votre bug et que vous avez codé votre solution, il est important de vous poser ces questions :
Est-ce que cette solution va couvrir d’autres cas d’erreur ? Est-ce qu’elle va engendrer d’autres bugs ?
Comment faire pour éviter que cette erreur ne se reproduise ?
Pourquoi est-ce qu’on se pose autant de questions ? Après tout, le bug est résolu, non ?
Eh bien, c’est en partie vrai.
En effet, ce n’est pas parce que vous avez réglé votre bug à un endroit que le code ne va pas casser à un autre endroit. Il est donc toujours important de “faire le tour du propriétaire” avant de passer à autre chose.
Si je vous dis ça, c’est en connaissance de cause. Il n’y a pas si longtemps, une développeuse avec qui je travaillais avait la fâcheuse habitude de mettre à jour les librairies du projet en oubliant de regarder si rien n’avait cassé. Dans les faits, mettre à jour les librairies est toujours une bonne idée. Seulement, voilà, elle manquait parfois de rigueur et oubliait de tout regarder, ce qui fait que le projet plantait parfois.
Mais il n’existe pas d’autres solutions ? Ça risque d’être un peu compliqué de faire le tour du propriétaire si mon projet comprend plusieurs dizaines de pages.
C’est vrai. :)
C’est pour ça que dans des projets d’envergure, vous passerez par des tests automatisés ainsi que des outils de “monitoring” pour traquer votre application. D’ailleurs, je pense que c’est l’étape d’après dans votre apprentissage : une fois que vous avez compris comment déboguer, vous pouvez vous intéresser à comment bien tester une application !
À vous de jouer !
C’est l’heure de résoudre le bug. Revenez sur la branche du chapitre précédente avec la commande :git checkout nomDeLaBranche
Utilisez les outils à votre disposition pour corriger le bug et faites une proposition de solution. Une fois votre proposition écrite, regardez si le reste de l’application continue de fonctionner correctement.
En résumé
Servez-vous des outils que nous avons durant le cours pour analyser et résoudre votre bug. Ces derniers composent votre boîte à outils.
Une fois le bug résolu, il est important que vous fassiez le tour du reste de votre application pour voir si rien n’a cassé.
Vous voici officiellement à la fin de ce cours sur le débogage ! Félicitation :) Je vous invite à lire la section de conclusion ci-après et à réaliser le dernier quiz, pour évaluer le compétence.
Faites le point sur le cours
Dans ce cours, vous avez vu beaucoup de choses : une méthode de débogage, des outils, des cas pratiques, des retours d’expérience professionnelle, etc.
Il est possible qu’au sortir de ce cours, vous vous demandiez où aller, quel autre cours commencer. Voici quelques conseils :
N’hésitez pas à revenir sur ce cours d’ici quelques mois. Certes, je n’explique aucune nouvelle notion dans ce cours, mais vous y apprendrez certainement encore quelque chose.
N’hésitez pas non plus à partager ce cours et à l'utiliser si vous devez mentorer des pairs. En tout cas, de mon côté, je vais utiliser ce cours comme ressource pédagogique lors de mes formations. :)
Sachez aussi que j’écris régulièrement sur Médium : https://tdimnet.medium.com/ . Chaque article est anglais et en français. Je profite souvent de mes posts pour reprendre des thématiques vues dans mes cours : ils me permettent d’aller plus loin et de proposer des cas pratiques.
J’ai été votre compagnon de route et d’apprentissage sur quatre parties et une petite dizaine de chapitres et je suis sincèrement ravi que vous ayez suivi mon cours. :)
Je vous remercie de votre temps et de votre attention. N’hésitez surtout pas à me contacter sur LinkedIn pour me donner du feedback sur le cours et plus précisément ce qui vous a plu et déplu.
À bientôt !
