DOC NON FINALISÉE, EN COURS D'ÉCRITURE

Remarque préliminaire:

Attention au débogage avec console.log

Même si votre programme fonctionne parfaitement, si vous faites un console.log(instance1.maFonctionQuiNRenvoieRien(param)) avec une fonction qui ne renvoie rien, vous obtiendrez un undefined.

Par contre, si vous mettez dans le console.log() une fonction qui renvoie quelque chose, tout sera ok.

Cependant, pour déboguer de façon plus puissante et sans risquer des mauvaises interprétations, utilisez directement le débogueur de VSCode. https://code.visualstudio.com/Docs/editor/debugging Pour plus d'efficacité, vous pouvez également utiliser les raccourcis clavier : https://github.com/mathalea/mathalea/wiki/Raccourci-clavier-pour-d%C3%A9boguer-sur-VSCode

0. Configuration

Vous pouvez configurer différents scénarios de débogage. En voici, deux : Le premier (Tests JS Pure) permet de vérifier ou de mieux comprendre n'importe quel code JS pur, sans se soucier de mathAlea. Le second (mathAlea) permet de déboguer du code mathAlea avec l'ouverture d'un serveur web qui tourne localement sur le port 8090. Cela permet de visualiser directement sur le navigateur l'exercice sur lequel vous êtes en train de travailler. Configuration pour tester du JS pur et mathAlea :

{
    // 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": [

        {   "name": "Tests JS Pure",
            "type": "node",
            "request": "launch",
            "program": "${file}", // Lance le débugger sur le fichier sur lequel on est en train de travailler

        /**
            "cwd": "${workspaceFolder}\\testsJS", // current working directory : Ça permet d'écrire directement
            // "program": "testClassPerteDuThis.js" au lieu d'être obligé d'écrire "program": "${workspaceFolder}\\testsJS\\testClassPerteDuThis.js"
            "program": "testClassPerteDuThis.js"
        */
        },
          {
            "name": "mathAlea",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:8080/mathalea.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

1. Les points d'arrêts

Ce sont les premières choses à mettre en place lors d'un débogage. Comme leur nom l'indique, il s'agit d'endroits dans le code où l'on veut arrêter le programme pour comprendre pourquoi les choses ne fonctionnent comme on le souhaite.

• Créer un point d'arrêt

Pour les mettre en place, il suffit de cliquer à gauche des numéros de lignes pour créer un point d'arrêt. Un disque rouge apparaitra.

• Supprimer un point d'arrêt

Il suffit de recliquer sur un point d'arrêt existant.

• Navigation dans le code

Grâce aux points d'arrêt, il vous sera possible de suivre étape par étape ou bien pas à pas l'exécution de votre code. Pour cela, il suffira de cliquer sur les boutons de navigation prévu à cet effet.

2. Le suivi des variables

Après avoir mis au moins un point d'arrêt, puis lancé votre débogueur, votre navigateur va s'ouvrir. Il faudra alors sélectionner l'exercice sur lequel vous êtes en train de travailler pour que vous puissiez le voir en temps réel.

Ensuite, il suffira de cliquer sur l'un des boutons suivants pour faire avancer votre programme pas à pas. Grâce au sous-menu nommé VARIABLES,

vous pouvez à tout moment visualiser, sous forme d'arbre, l'état de tous les objets créés par votre code. Cela est très instructif, pour suivre les différentes valeurs que prennent les variables mais surtout pour comprendre comment l'interpréteur (moteur JS) a construit les objets. En particulier, cela permet de visualiser le chainage des prototypes afin de bien comprendre l'héritage (par prototypage).

Attention, si il n’y a pas de point d’arrêt, le programme ira jusqu’au bout et les variables disparaitront.