Apprenez à programmer avec JavaScript

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.

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.

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 !

Il est important de savoir utiliser les consoles.log et de bien analyser les différentes variables. L’objectif est de comprendre quelle est l’erreur de logique qui pose souci.

Rendez-vous sur le CodePen à cette adresse. Le code a pour objectif de convertir des années en mois (dans une année, il y a 12 mois). Si on saisit 10 ans dans le champ Année et qu’on clique sur Convertir, on se retrouve avec une phrase nous indiquant que dans 10 années il y a 80 mois, ce qui est faux car la bonne réponse est 120 mois.

Le calcul des mois se fait à la ligne 25, et on souhaite comprendre ce qui ne va pas dans le calcul.

Votre mission ici est de faire des console.log au niveau des lignes 27 à 31 pour analyser les variables utilisées pour le calcul de la ligne 25. Suite à l'analyse, vous pourrez comprendre ce qui ne va pas et effectuer la correction nécessaire.

Correction

À la ligne 28, nous ajoutons le code suivant :

console.log('annee', annee);

console.log('params', params);

Ce qui donnera dans la console, si on simule une conversion pour la valeur 10 :

> annee 10

> params (20) [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

 On en déduit que la valeur de  annee  est cohérente. En ce qui concerne  params  , on observe que c’est un tableau de valeur allant de 20 à 1. Dans notre calcul, on souhaite récupérer la valeur du tableau qui vaut 12. On trouve cette valeur à l’index 8.

Si on reprend le calcul de mois :

const mois = annee * params[12];

On constate que l’on récupère l’index 12 de  params  , et non le 8. Donc on remplace la ligne 25 par :

const mois = annee * params[8];

Maintenant notre application donne des valeurs cohérentes.

Conclusion de l’exercice

Cet exercice n’était pas une grosse application, mais la démarche a permis de démontrer l'intérêt des console.log dans notre code pour bien comprendre les valeurs réelles pendant l'exécution du programme. Il ne faut pas avoir peur de faire des console.log pour avoir une vision plus large de la logique, mais attention à ne pas oublier de supprimer ces lignes de votre code avant une mise en ligne.

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.