Précédent

Suivant

Exercice - Déboguer avec Visual Studio Code

Effectué

Il est temps de mettre en pratique vos connaissances nouvellement acquises en débogage. Il se trouve que nous avons une occasion rêvée. Dans notre application Tailwind Traders, nous développons une nouvelle fonctionnalité qui permet d’afficher le prix d’un produit dans plusieurs devises. En effet, un collègue a pour cela écrit du code, mais il a du mal à déterminer ce qui ne fonctionne pas bien. Nous allons l’aider.

Créer un fichier JavaScript dans un espace de travail Visual Studio

Pour cet exercice, vous avez besoin d’un fichier JavaScript pour procéder au débogage. Pour utiliser les commandes de lancement du débogueur, le fichier JavaScript doit se trouver dans un espace de travail Visual Studio.

L’objectif de l’application est de définir le taux de change entre trois devises : USD, EUR et JPY. Ensuite, nous souhaitons afficher la valeur que représente 10 EUR dans les autres devises en utilisant deux chiffres après la virgule. Pour chaque devise ajoutée, le taux de change pour toutes les autres devises doit être calculé.

1. Dans Visual Studio Code, créez un fichier nommé mycurrency.js dans le sous-dossier ./nodejs-debug/.

2. Collez le code suivant dans le nouvel éditeur de fichier :

   const rates = {};
   
   function setExchangeRate(rate, sourceCurrency, targetCurrency) {
     if (rates[sourceCurrency] === undefined) {
       rates[sourceCurrency] = {};
     }
   
     if (rates[targetCurrency] === undefined) {
       rates[targetCurrency] = {};
     }
   
     rates[sourceCurrency][targetCurrency] = rate;
     rates[targetCurrency][sourceCurrency] = 1 / rate;
   }
   
   function convertToCurrency(value, sourceCurrency, targetCurrency) {
     const exchangeRate = rates[sourceCurrency][targetCurrency];
     return exchangeRate && value * exchangeRate;
   }
   
   function formatValueForDisplay(value) {
     return value.toFixed(2);
   }
   
   function printForeignValues(value, sourceCurrency) {
     console.info(`The value of ${value} ${sourceCurrency} is:`);
   
     for (const targetCurrency in rates) {
       if (targetCurrency !== sourceCurrency) {
         const convertedValue = convertToCurrency(value, sourceCurrency, targetCurrency);
         const displayValue = formatValueForDisplay(convertedValue);
         console.info(`- ${convertedValue} ${targetCurrency}`);
       }
     }
   }
   
   setExchangeRate(0.88, 'USD', 'EUR');
   setExchangeRate(107.4, 'USD', 'JPY');
   printForeignValues(10, 'EUR');
   

3. Pour enregistrer le fichier, appuyez sur Ctrl+S (Windows, Linux) ou sur Cmd+S (Mac).

Créer une configuration de lancement

Nous allons beaucoup utiliser le débogueur : créons donc une configuration de lancement pour votre application.

1. Accédez à l’onglet Exécuter dans Visual Studio Code, sélectionnez Créer un fichier launch.json, puis sélectionnez le déboguer Node.js.

   Visual Studio Code crée le fichier de configuration .vscode/launch.json dans votre espace de travail et ouvre le fichier de lancement pour modification.

   

   Par défaut, une configuration de lancement est créée pour exécuter le fichier actuellement ouvert. Dans cet exemple, le fichier ouvert est mycurrency.js. Vous pouvez modifier la configuration de lancement pour personnaliser le démarrage de votre programme lorsque vous déboguez.

2. Dans la configuration de lancement, mettez à jour la valeur de la propriété program.

   {
       // Use IntelliSense to learn about possible attributes.
       // Hover to view descriptions of existing attributes.
       // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
       "version": "0.2.0",
       "configurations": [
           {
               "type": "node",
               "request": "launch",
               "name": "Launch Program",
               "skipFiles": [
                   "<node_internals>/**"
               ],
               "program": "${workspaceFolder}/nodejs-debug/mycurrency.js"
           }
       ]
   }
   

   • ${workspaceFolder} indique la racine de l’espace de travail.

3. Fermez le fichier .vscode/launch.json.

Notes

Vous pouvez créer différentes configurations de lancement pour votre projet en sélectionnant Ajouter une configuration en bas à droite.

Analyser les problèmes

Vérifiez que votre environnement Visual Studio Code est prêt à surveiller le processus de débogage :

• Le panneau du débogueur doit être ouvert à gauche. Utilisez l’icône de l’onglet Exécuter sur la gauche pour activer/désactiver la visibilité du panneau.
• La console de débogage doit être ouverte en bas. Vous pouvez ouvrir la console en sélectionnant Affichage>Console de débogage ou en appuyant sur Ctrl+Shift+Y (Windows, Linux) or Cmd+Shift+Y (Mac).

Maintenant, vous êtes prêt à démarrer le débogage.

Dans les commandes de lancement du débogueur, démarrez le programme avec le débogage activé (la flèche verte).

Le programme doit se terminer rapidement. En effet, vous n’avez pas encore ajouté de points d’arrêt.

Vous devez voir ce texte dans la console de débogage, suivi d’une exception.

The value of 10 EUR is:
11.363636363636365
- 11.363636363636365 USD
/app/node-101/currency.js:23
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/app/node-101/currency.js:23:16)
    at printForeignValues (/app/node-101/currency.js:32:28)
    at Object.<anonymous> (/app/node-101/currency.js:40:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11

Ce que ce programme doit faire est définir le taux de change entre trois devises (USD, EUR, JPY) et afficher la valeur correspondante de 10 EUR dans toutes les autres devises, avec deux chiffres après la virgule.

Nous pouvons voir ici deux bogues :

• Il y a plus de deux chiffres après la virgule.
• Le programme a planté avec une exception et n’est pas parvenu à afficher la valeur en JPY.

Conseil

• Vous pouvez ajouter "outputCapture": "std", à votre fichier de configuration de lancement pour augmenter la sortie de journalisation.
• Définissez un logpoint au lieu d’un point d’arrêt pour éviter d’arrêter l’exécution du programme. Un « logpoint » est une variante d’un point d’arrêt qui ne « s’interrompt » pas dans le débogueur, mais enregistre un message dans la console. Les logpoints sont particulièrement utiles pour injecter la journalisation lors du débogage d’environnements de production qui ne peuvent pas être suspendus ni arrêtés.

Corriger l’affichage des chiffres

Nous allons commencer par résoudre le premier bogue. Comme vous n’avez pas écrit ce code et qu’il y a différentes fonctions appelées, commençons par comprendre le flux de l’exécution en utilisant l’exécution pas à pas.

Utiliser des points d’arrêt et l’exécution pas à pas

Pour ajouter un point d’arrêt, sélectionnez un endroit dans la marge de gauche à la ligne 39 sur printForeignValues(10, 'EUR');.

Recommencez le débogage et effectuez un pas à pas détaillé de la fonction printForeignValues() avec la commande de débogage Pas à pas détaillé :

Vérifier l’état de variables

Maintenant, prenez le temps d’inspecter les différentes valeurs des variables dans le volet Variables.

• Quelles sont les valeurs des variables value et sourceCurrency ?
• Pour la variable rates, voyez-vous les trois clés attendues, USD, EUR et JPY ?

Pour avancer pas à pas jusqu’à ce que la variable convertedValue soit définie, utilisez la commande de débogage Pas à pas principal :

Une fois que vous avez utilisé la commande Pas à pas principal cinq fois, vous devriez voir que la valeur de la variable convertedValue est définie comme prévu 11.363636363636365.

Si nous utilisons le pas à pas principal une fois de plus, nous verrons la valeur de la variable displayValue. La valeur devrait être la chaîne mise en forme à afficher avec deux chiffres 11.36.

Nous pouvons donc conclure que jusqu’à ce stade dans le programme, les fonctions convertToCurrency() et formatValueForDisplay() semblent correctes et retournent le résultat attendu.

Corriger l’erreur

Utilisez la commande Pas à pas détaillé une fois pour atteindre l’appel à la fonction console.info(). Examinez attentivement cette ligne de code. Voyez-vous l’erreur qu’il y a ici ?

Nous devons corriger ce bogue de programme à l’aide de la variable displayValue au lieu de la variable convertedValue pour afficher la valeur.

1. Mettez à jour votre fichier currency.js pour utiliser le nom correct de la variable. Changez l’appel à la fonction console.info() sur la ligne 32 pour utiliser la variable displayValue au lieu de la variable convertedValue :

   console.info(`- ${displayValue} ${targetCurrency}`);
   

2. Enregistrez les changements apportés à votre fichier.

3. Redémarrez le programme.

Vérifiez que le programme affiche correctement la valeur USD sous la forme 11.36. Premier bogue - résolu.

Rechercher la cause du plantage

Voyons à présent pourquoi le programme plante.

1. Dans votre fichier currency.js, supprimez le point d’arrêt que vous avez défini sur la ligne 39.

2. Pour forcer le programme à se mettre en pause une fois que l’exception est levée, dans le volet Points d’arrêt, cochez la case Exceptions non interceptées.

3. Réexécutez le programme dans le débogueur.

Le programme devrait se mettre en pause sur l’exception et montrer un grand rapport d’erreurs au milieu de la fenêtre de l’éditeur.

Examinez la ligne où l’exécution s’est arrêtée et notez le message de l’exception TypeError: Cannot read property 'toFixed' of undefined. Vous pouvez déduire du message que la fonction de paramètre value a la valeur undefined au lieu d’être un nombre. Cette erreur est à l’origine de l’exception.

Remonter dans la pile des appels

La trace de la pile que vous voyez sous le message d’erreur peut être un peu difficile à déchiffrer. La bonne nouvelle, c’est que Visual Studio Code traite la pile des appels des fonctions pour vous. Par défaut, il ne montre que les informations significatives dans le volet Pile des appels. Utilisons les informations de pile des appels pour rechercher le code qui a conduit à cette exception.

Nous savons que l’exception a été levée dans l’appel à la fonction formatValueForDisplay().

1. Dans le panneau du débogueur, accédez au volet Pile des appels.

2. Pour voir où la fonction formatValueForDisplay() a été appelée, double-cliquez sur la fonction sous celle-ci, la fonction.printForeignValues

   Visual Studio Code passe à la ligne de la fonction printForeignValues dans votre fichier currency.js, où la fonction formatValueForDisplay() a été appelée :

   const displayValue = formatValueForDisplay(convertedValue);
   

Examinez attentivement cette ligne de code. Le paramètre à l’origine de l’exception provient de la variable convertedValue. Vous devez déterminer à quel endroit cette valeur de paramètre devient undefined.

Une possibilité est d’ajouter un point d’arrêt sur cette ligne et d’inspecter la variable chaque fois que le point d’arrêt s’arrête à cette ligne. Toutefois, nous ne savons pas quand la valeur incorrecte risque d’arriver et, dans les programmes complexes, cette approche de débogage peut être fastidieuse. Examinons une autre méthode.

Ajouter un point d’arrêt conditionnel

Ce qui serait utile dans notre cas est de pouvoir arrêter le débogueur à ce point d’arrêt uniquement lorsque la valeur de la variable convertedValue est undefined. Par chance, Visual Studio Code peut effectuer cette action avec les options de clic droit de la souris.

1. Dans votre fichier currency.js, dans la marge gauche à la ligne 31, cliquez avec le bouton droit et sélectionnez Ajouter un point d’arrêt conditionnel.

   

2. Après avoir cliqué avec le bouton droit, entrez la condition suivante pour déclencher le point d’arrêt, puis appuyez sur Entrée :

   `convertedValue === undefined`
   

3. Redémarrez le programme.

Le programme doit maintenant s’arrêter à la ligne 31 et nous pouvons examiner les valeurs de la pile des appels.

Observer l’état actuel

Prenons le temps d’analyser l’état actuel du programme.

• La valeur de la variable convertedValue provient de l’appel à la fonction convertToCurrency(value, sourceCurrency, targetCurrency). Nous devons vérifier les valeurs de paramètre dans cet appel de fonction et confirmer qu’elles sont correctes.

• En particulier, nous devons examiner la variable value et confirmer qu’elle a la valeur attendue 10.

Jetez un coup d’œil sur le code de la fonction convertToCurrency().

function convertToCurrency(value, sourceCurrency, targetCurrency) {
  const exchangeRate = rates[sourceCurrency][targetCurrency];
  return exchangeRate && value * exchangeRate;
}

Vous savez que le résultat de ce code est undefined. Vous savez également que la variable value est définie sur 10. Ces informations nous aident à voir que le problème doit être avec la valeur de la variable exchangeRate.

Dans votre fichier currency.js, pointez avec la souris sur la variable rates pour y jeter un œil :

Vous essayez d’obtenir le taux de change de EUR en JPY, mais si vous développez la valeur en EUR, vous pouvez constater qu’il y a un taux de change seulement pour USD. Le taux de change pour JPY est manquant.

Corriger les taux de change manquants

Maintenant que vous savez qu’il manque des taux de change, voyons pourquoi. Pour supprimer tous les points d’arrêt existants, dans le volet Points d’arrêt, sélectionnez l’icône Supprimer tous les points d’arrêt.

Surveiller la variable rates

Définissons un point d’arrêt pour surveiller la variable rates.

1. Dans votre fichier currency.js, ajoutez un point d’arrêt sur la ligne 37 de la fonction setExchangeRate(0.88, 'USD', 'EUR');.

2. Dans le volet Espion, sélectionnez Plus et entrez rates.

   Chaque fois que la valeur de la variable rates est modifiée, la valeur mise à jour s’affiche dans le volet Espion.

3. Redémarrez le programme.

4. Lorsque le point d’arrêt s’arrête au premier appel à la fonction setExchangeRate(), utilisez la commande Pas à pas principal.

5. Dans le volet Espion, examinez la valeur de la variable rates.

   À ce stade, USD et EUR ont des taux de change opposés correspondants, comme prévu.

6. Effectuez un nouveau pas à pas principal au deuxième appel à la fonction setExchangeRate().

   Vous voyez que USD et JPY ont des taux de change opposés, mais qu’il n’y a rien entre EUR et JPY.

Il est temps d’examiner le code de la fonction setExchangeRate().

function setExchangeRate(rate, sourceCurrency, targetCurrency) {
  if (rates[sourceCurrency] === undefined) {
    rates[sourceCurrency] = {};
  }

  if (rates[targetCurrency] === undefined) {
    rates[targetCurrency] = {};
  }

  rates[sourceCurrency][targetCurrency] = rate;
  rates[targetCurrency][sourceCurrency] = 1 / rate;
}

Les lignes les plus importantes dans cette fonction sont les deux dernières. Apparemment, vous avez trouvé le deuxième bogue ! Les taux de conversion sont définis uniquement entre les variables sourceCurrency et targetCurrency. Le programme doit également calculer le taux de conversion pour les autres devises qui ont été ajoutées.

Corriger le code

Nous allons résoudre le code pour le problème de taux de conversion.

1. Mettez à jour votre fichier currency.js pour calculer le taux de conversion pour les autres devises.

   Remplacez le code sur les lignes 12 et 13 :

   rates[sourceCurrency][targetCurrency] = rate;
   rates[targetCurrency][sourceCurrency] = 1 / rate;
   

   avec ce code mis à jour :

   for (const currency in rates) {
     if (currency !== targetCurrency) {
       // Use a pivot rate for currencies that don't have the direct conversion rate
       const pivotRate = currency === sourceCurrency ? 1 : rates[currency][sourceCurrency];
       rates[currency][targetCurrency] = rate * pivotRate;
       rates[targetCurrency][currency] = 1 / (rate * pivotRate);
     }
   }
   

2. Enregistrez les changements apportés à votre fichier.

Le code mis à jour définit le taux de conversion pour toutes les devises autres que sourceCurrency et targetCurrency. Le programme utilise le taux de conversion de sourceCurrency pour déduire le taux entre l’autre devise et targetCurrency. Le code définit ensuite le taux de conversion pour l’autre devise en conséquence.

Notes

Ce correctif fonctionne seulement si les taux entre sourceCurrency et les autres devises existent déjà, ce qui constitue une limitation acceptable dans ce cas-ci.

Tester la correction

Testons notre modification.

1. Supprimez tous les points d’arrêt et surveillez les variables.

2. Redémarrez le programme.

Vous devez maintenant voir le résultat attendu dans la console sans plantage.

The value of 10 EUR is:
- 11.36 USD
- 1220.45 JPY

Vous avez terminé. Vous avez corrigé le code. Vous savez maintenant utiliser Visual Studio Code pour déboguer du code, même sans connaître ce dernier au préalable. Bravo !

Nettoyer le conteneur de développement

Une fois le projet terminé, vous souhaiterez peut-être nettoyer votre environnement de développement ou le ramener à son état normal.

Développement à distance (navigateur)

La suppression de l’environnement GitHub Codespaces vous permet d’optimiser le nombre d’heures gratuites par cœur que vous obtenez pour votre compte.

Important

Pour plus d’informations sur les droits de votre compte GitHub, consultez GitHub Codespaces mensuel inclus stockage et heures principales.

1. Connectez-vous au tableau de bord GitHub Codespaces (https://github.com/codespaces).

2. Localisez vos codespaces en cours d’exécution provenant du référentiel GitHub MicrosoftDocs/node-essentials.

   

3. Ouvrez le menu contextuel du codespace et sélectionnez Supprimer.

   

Développement local (Docker)

Vous n’êtes pas nécessairement obligé de propre votre environnement local, mais vous pouvez arrêter le conteneur de développement en cours d’exécution et revenir à l’exécution de Visual Studio Code dans le contexte d’un espace de travail local.

1. Ouvrez la palette de commandes, recherchez les commandes Conteneurs de développement, puis sélectionnez Conteneurs de développement : rouvrir le dossier localement.

   

Conseil

Visual Studio Code arrête le conteneur de développement en cours d’exécution, mais le conteneur existe toujours dans Docker dans un état arrêté. Vous avez toujours la possibilité de supprimer le instance de conteneur, l’image conteneur et les volumes de Docker pour libérer plus d’espace sur votre ordinateur local.

Continuer