Vous travaillez toujours sur le projet de site de Robbie Lens. Pour ce dernier cas, vous avez essayé d’apprendre de vos erreurs. Vous avancez donc pas à pas. Après avoir mis en place un formulaire de contact en HTML, vous décidez de rajouter une condition avant d’envoyer le mail. En effet, si vous recevez un mail, mais que vous n’avez ni le numéro de téléphone ni le mail de la personne, ce sera compliqué de la recontacter ! Votre condition pour le moment permet juste d’afficher dans la console le message “Send Mail”. Pour la remplir, il faut avoir un message et soit le numéro de téléphone, soit le mail de l’utilisateur. Mais voilà, malgré vos précautions, rien ne se passe !
Travailler de manière incrémentale, cela veut dire ajouter de petits bouts de code, les uns à la suite des autres. C’est comme empiler des briques, une par une, pour construire un mur, puis au final, une maison !
Étape 1 : posez-vous des questions pour analyser la situation
Comment savez-vous que vous avez une erreur ?
Vous ne cherchez pas à changer le contenu de la page. Vous ne cherchez pas à offrir une nouvelle fonctionnalité à l’utilisateur, simplement à vérifier que votre code fonctionne. C’est pour cela que vous vous attendez à un retour dans la console et à rien d’autre. Mais là, vous n’avez rien, nulle part.
Vous n’avez donc rien cassé, mais il y a un souci dans votre logique.
C’est là que les choses deviennent plus intéressantes ! Ce n’est plus une simple erreur de syntaxe ou d’utilisation de quelque chose qui n’existe pas. C’est une vraie question d'algorithmique.
Étape 2 : procédez par élimination en relisant votre code
Prenez le temps de bien relire le code.
Isolez la fonctionnalité en vous servant de Git, vous obtiendrez la fonction sendMail , ici entre les lignes 68 et 80 de la capture d'écran ci-dessous :
Allez voir ensuite s’il y a un message dans les logs.
Rien ? On poursuite a méthode avec l'étape suivante !
Étape 3 : prenez du recul en écrivant du pseudo-code
Je vais vous laisser réaliser cette étape par vous-même.
À l'étape précédente, nous avons isolé du code à l'aide de Git :
function sendMail() {
var phone = document.getElementById('telephone')
var mail = document.getElementById('email')
var message = document.getElementById('message')
if (message.value !== '') {
if (phone.value !== '' && mail.value !== '') {
console.log("Send mail")
}
}
}Maintenant, à partir de ce bout de code, essayez de ré-écrire la fonction sendMail en pseudo-code. Inutile que ce soit correct d'un point de vue syntaxique, l'important c'est de mettre à plat la logique. Cela pourrait vous aider et vous guider vers la résolution du bug.
Toujours rien ? Passons à l'étape 4 !
Étape 4 : utilisez les ressources disponibles
Retroussez vos manches parce qu’il va falloir mettre les mains dans le cambouis... euh... le code !
Il y a un outil que nous n’avons pas encore utilisé, mais qui est super puissant : l’impression dans la console !
Pour bien situer le problème, vous allez encore avancer par petit à petit.
Première chose à voir : est-ce que la fonction sendMail() s'exécute ?
Pour cela, vous allez rajouter un console.log(“Je rentre dans la fonction sendMail”) au tout début de celle-ci :
function sendMail() {
console.log("Je rentre dans la fonction sendMail")
var phone = document.getElementById('telephone')
var mail = document.getElementById('email')
var message = document.getElementById('message')
if (message.value !== '') {
if (phone.value !== '' && mail.value !== '') {
console.log("Send mail")
}
}
}Sauvegardez et testez votre code en appuyant seulement sur le bouton ‘Envoyer’. C’est tout ce dont nous avons besoin.
Allez voir dans la console :
Ça marche ! Alors, continuons !
Deuxième chose à voir : est-ce que vous rentrez dans la première condition ?
Ajoutez console.log(“Je rentre dans ma première condition”) :
function sendMail() {
console.log("Je rentre dans la fonction sendMail")
var phone = document.getElementById('telephone')
var mail = document.getElementById('email')
var message = document.getElementById('message')
if (message.value !== '') {
console.log(“Je rentre dans ma première condition”)
if (phone.value !== '' && mail.value !== '') {
console.log("Send mail")
}
}
}N’oubliez pas de mettre un message dans le formulaire et appuyez sur le bouton ‘Envoyer’.
Qu’avez-vous dans la console ? Votre message ! Ça marche toujours !
Troisième chose à faire : insérez console.log(“Send mail”) .
Attendez ! Mais c’est justement cela qui ne fonctionne pas, non ?
Vous pouvez donc en conclure qu’il y a un problème dans votre dernière condition.
Je vous propose de jouer avec celle-ci en la testant avec différents cas d’utilisation :
Pour commencer, essayez d’appuyer sur le bouton ‘Envoyer’ sans mettre de texte dans les champs. Vous ne devriez avoir qu’un seul message, celui qui vous confirme que vous êtes rentré dans la fonction.
Ensuite, essayez avec un message et le numéro de téléphone. Alors ? Pas de “Send mail”.
Faites la même chose, mais avec l’e-mail au lieu du numéro. Toujours rien ?
Alors, essayez d’envoyer un message avec l’e-mail et le téléphone.
Ah ! Cette fois-ci ça marche !
Votre condition est donc mauvaise, elle ne fonctionne que si les 3 champs sont remplis.
Étape 5 : résolvez le problème
En effet, le && en JavaScript requiert que les 2 conditions soient remplies.
Pour avoir le choix entre l’une et l’autre, il faut utiliser le || .
Remplacez le && par le || puis retestez les cas que nous avons faits ensemble.
Quand tout est bon, n’oubliez pas de faire un commit !
Appuyez-vous sur l’IA
Encore une fois, utilisons l'IA pour nous aider. Pour cela, créons une consigne pour ChatGPT en reprenant les parties déjà étudiées :
Contexte : « Je veux vérifier un formulaire de contact à l’aide de JavaScript. Lors de la soumission, je veux afficher dans la console “Send Mail” seulement si un message est saisi et si l’email ou le numéro de téléphone est renseigné dans le formulaire. »
Description du problème : « Lorsque je soumets le formulaire avec un email ou un numéro, rien ne s’affiche dans la console. »
Code concerné : « Voici le code que j’ai écrit pour cela : (insérez le code de la vérification du formulaire) »
Question : « Comment corriger le problème ? »
Voici le prompt :
Ce à quoi ChatGPT nous répond :
Encore une fois, ChatGPT a analysé le problème (notre condition vérifie que les deux champs à la fois sont remplis) et nous a proposé une correction basée sur notre code.
Vous souhaitez aller plus loin dans vos connaissances de ChatGPT ? Trouvez plus d'astuces pour les développeurs ici !
En résumé
La console est la meilleure amie du développeur. Elle vous permet de débugger les erreurs de logique.
Avoir des tests permet la non-régression et vous fait gagner du temps.
Travailler de manière incrémentale permet de cibler son débuggage et gagner en efficacité.
Bravo ! Vous pouvez être fier de vous ! Désormais vous savez sauver un programme des méchants bugs !
Mais il existe d’autres moments, dans la vie d’une personne qui fait du code, où des méthodes et des outils peuvent être utiles. C’est lorsqu’on ne sait pas comment faire, quoi coder pour développer telle ou telle fonctionnalité. Dans la prochaine partie, nous allons tester ensemble des outils pour vous aider à créer du code et répondre à une problématique.
