• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 23/07/2020

Déboguez votre fonction

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Pourquoi cela ne fonctionne pas ?!

Quand quelque chose ne va pas dans votre projet, il peut être difficile de savoir ce qui s'est passé. Voici quelques techniques qui, je l'espère, devraient vous aider à remettre les choses d'aplomb !

Affichez la console

La console est un outil incroyablement utile pour le débogage du code. Observons une version défectueuse d'une fonction d'un chapitre précédent :

const getWordCount = (stringToTest) => {
const wordArray = stringToTest.split('');
return wordArray.length;
}

Pour une raison quelconque, cette fonction renvoie des valeurs curieuses. Utilisons un affichage de console pour voir ce qui se passe :

const getWordCount = (stringToTest) => {
const wordArray = stringToTest.split('');
console.log("Word array in getWordCount: ");
console.log(wordArray);
return wordArray.length;
}

Maintenant, à l'appel suivant, nous obtenons le résultat suivant sur la console :

getWordCount('I am a fish');
/* la console montre :
"Word array in getWordCount:"
["I", " ", "a", "m", " ", "a", " ", "f", "i", "s", "h"]
*/

Plutôt que de répartir la chaîne en mots, elle la répartit en lettres ! Une observation plus attentive de la fonction montre une erreur à l'appel de  split  : ce devrait être  stringToTest.split(' '), et non pas  stringToTest.split('').

L'utilisation de la console convient bien dans les cas simples et isolés comme celui-ci, mais dans les projets plus complexes, ce serait beaucoup plus difficile et plus chronophage. Dans ce cas, il faut des armes plus puissantes.

Utilisez des outils pour développeur

Pour écrire du JavaScript pour des sites web, vous pouvez utiliser les outils pour développeur intégrés dans les quatre navigateurs essentiels : Chrome, Firefox, Safari et Edge. Chaque navigateur contient un système qui vous permet d'ajouter des points d'arrêt pas-à-pas (breakpoints) à votre code. Quand le navigateur arrive sur un point d'arrêt de votre code, il met l'exécution en pause, ce qui vous permet de parcourir l'exécution ligne après ligne, en vérifiant les valeurs des variables à chaque étape. Vous pouvez même ignorer certains morceaux de code si vous souhaitez voir comment votre appli y réagit.

La plupart des environnements de développement intégrés comportent aussi un débogueur, qui vous permet de tout déboguer dans votre espace de travail. Cela peut être pratique, en particulier si votre code ne doit pas s'exécuter sur une page web et ne peut pas être vérifié dans le navigateur. Les environnements de développement intégrés les plus courants sont notamment Visual Studio Code (gratuit) et WebStorm (abonnement mensuel, gratuit pour certains étudiants).

L'affichage de console, c'est bien, les débogueurs c'est mieux, mais quand tout le reste a échoué, il existe une dernière solution.

Déboguez avec un canard en plastique

When you get stuck, talk to the duck
Quand tout va mal, parle au canard !

Quand votre code a un bug que vous ne pouvez pas trouver et expliquer, vous pouvez parler à un canard en plastique que vous conservez sur votre bureau. Vous expliquez votre code ligne par ligne en termes simples, que le canard peut comprendre. La réflexion à voix haute et l'explication de votre code en termes simples vous permettra souvent de voir finalement "Comment n'ai-je pas vu ça ? Il y a un bug !"

Même si cette section est un peu humoristique, le raisonnement sur votre code, à voix haute et en termes simples, peut être utile pour le débogage et la factorisation !

En résumé

Dans ce chapitre, vous avez appris trois techniques de débogage différentes :

  • affichage de console — parfait pour des erreurs petites, simples et isolées, mais pas idéal dans des projets plus grands et plus complexes ;

  • utilisation d'outils pour développeur — qu'il s'agisse des outils intégrés dans la plupart des navigateurs ou du débogueur de votre environnement de développement intégré, c'est à coup sûr la façon fiable de déboguer du code ;

  • débogage avec un canard en plastique — quand les choses vont terriblement mal.

Dans le chapitre suivant, nous allons nous intéresser à un type de fonction qui, utilisé correctement, peut améliorer spectaculairement les performances d'un projet.

Exemple de certificat de réussite
Exemple de certificat de réussite