Vous travaillez sur un projet pour un client qui s’appelle Robbie Lens. Il est photographe et a besoin d’un portfolio virtuel afin de mettre en valeur son travail. Vous avez fait une barre de navigation pour permettre à l’utilisateur de se déplacer plus rapidement sur le site internet. Votre client voudrait avoir son logo en haut à gauche sur cette barre pour qu’il soit toujours visible. Vous avez trouvé comment faire et avez rajouté une image dans votre portée de navigation. Cependant, en ouvrant de nouveau la page internet, la barre de navigation n’est plus là :
Étape 1 : posez-vous des questions pour analyser la situation
La première question que vous devez vous poser, c’est : “Comment je sais que j’ai une erreur ?”
Qu’avez-vous pu constater ?
Ici, le comportement souhaité n’est pas le comportement observé.
De plus, vous avez une régression de votre projet. Cela veut dire qu’une fonctionnalité déjà présente ne l’est plus désormais.
Vous vous doutez bien que ce n’est pas de la magie… Dans ce cas précis, il semblerait qu’en modifiant votre code HTML, quelque chose ne se soit pas passé comme prévu ! Cela peut être dû au code que vous avez ajouté, ou à une modification du code existant.
Étape 2 : vérifiez les erreurs d’inattention
Pour trouver votre erreur, vous allez commencer par chercher si ce n’est pas une simple faute d'inattention (ce sont les plus courantes !). Le plus simple est de commencer par vous relire.
Afin de vous faciliter la tâche, je vous invite à utiliser Git, car si vous avez des modifications en cours ou si vous cliquez sur un commit, vous pourrez voir spécifiquement quelles lignes ont été modifiées. Cela vous permettra de vous concentrer sur une partie du code et vous fera gagner du temps !
<nav>
<img src="images/logo.png" alt="Logo Robbie Lens" />
<div>
<a href="index.html">Accueil</a>
<a href="a-propos.html">À propos</a>
<a href="portfolio.html">Portfolio</a>
</div>
</nav>
</header>Maintenant que vous savez quoi relire :
Revoyez ligne par ligne ce que vous avez fait.
Cherchez s’il n’y a pas des caractères en trop ou qui pourraient manquer.
Inspectez votre indentation.
Vérifiez que tout ce qui a été ouvert a bien été fermé (balises, fonctions, portée…).
Si vous avez besoin d’un petit coup de pouce, vous pouvez utiliser d’autres outils comme, par exemple, un formateur et/ou validateur de code de votre langage.
Ce formateur de code pour HTML permet de copier-coller votre code et de le récupérer correctement indenté. Il existe aussi peut-être des outils dans votre éditeur de code, comme l’extension Prettier sur VSCode.
Si vous ne comprenez pas une erreur, faites une recherche sur internet. Ce validateur de code HTML nous indique des erreurs et des informations. Vous pouvez filtrer pour n’avoir que les erreurs :
Vous verrez qu’il y a un problème avec la balise header. En effet, la balise fermante n’a pas de balise ouvrante ! Si tout ce qui a été ouvert doit être fermé, c’est valable aussi dans l’autre sens.
Prettier, lui, va d’abord valider le code, ensuite le formater et donc l’indenter correctement.
Ça y est, vous avez trouvé l’erreur !
Il semblerait qu’en modifiant votre code HTML, vous ayez supprimé par mégarde la balise ouvrante <header> .
Il est vrai que la mauvaise indentation du code ne vous a pas aidé. C’est un bon apprentissage pour les prochaines fois ! 😉
Puisque vous avez trouvé l'erreur, inutile de passer par les étapes 3 et 4, vous pouvez directement passer à l'étape 5 !
Étape 3 : résolvez le problème
Maintenant, vous pouvez corriger l’erreur en ajoutant la balise <header> entre celles du corps <body> et de la navigation <nav> .
<header>
<nav>
<img src="images/logo.png" alt="Logo Robbie Lens" />
<div>
<a href="index.html">Accueil</a>
<a href="a-propos.html">À propos</a>
<a href="portfolio.html">Portfolio</a>
</div>
</nav>
</header>Hop hop hop ! Attention, ce n’est pas fini !
Avant de passer à la suite, testez toujours votre code afin de vérifier que vous avez bien résolu le problème et qu’il n’y en a pas d’autres. Voire que vous n’en avez pas créé un nouveau.
Dernière petite chose, pensez à faire un commit une fois que votre fonctionnalité est finie, relue et testée. Ajoutez-y une description claire et pertinente, comme par exemple : “Fix bug : Ajout du logo par une image, à gauche dans la barre de navigation + indentation du code”.
Appuyez-vous sur l’IA
En appliquant les étapes précédentes, vous avez réussi à rectifier votre erreur. Vous pouvez aussi recourir à des outils comme ChatGPT. C'est utile si vous rencontrez des difficultés à repérer l’erreur, ou si vous l’avez repérée mais ne savez pas comment la rectifier.
Nous pouvons décrire notre problème à ChatGPT en suivant ces étapes :
Rappeler le contexte : « J'ai modifié le code HTML d'un site web, car je souhaite ajouter un logo dans le header, à gauche du menu de navigation »
Détailler l’erreur obtenue : « En effectuant cette modification, le header a totalement disparu »
Fournir la portion de code modifiée susceptible d’être à l’origine de l’erreur
Posez à ChatGPT votre question : « D'où pourrait venir le problème ? »
Voici un exemple de la demande que vous pourriez faire à ChatGPT :
Voici la réponse donnée par ChatGPT :
Dans notre cas, la réponse est bonne et correspond bien à notre problème ! Ce n’est pas toujours le cas, donc gardez l’esprit critique et autorisez-vous à mettre ses réponses en doute.
En résumé
La plupart des erreurs sont des fautes d’inattention.
Avoir un code “propre” facilite le débuggage et vous fait gagner du temps.
Git vous permet d’organiser votre développement.
Isoler les lignes modifiées recentre vos recherches.
L’ordinateur essaiera toujours de lancer votre programme et d’afficher quelque chose, quitte à laisser de côté une partie du code.
Bravo, vous avez corrigé l’erreur ! Mais le projet n’est pas fini. Je suis sûre que nous allons devoir en résoudre d’autres pour apprendre à les anticiper.
