Dans ce didacticiel, vous apprendrez le débogage en JavaScript à l'aide d'exemples.
Vous pouvez rencontrer et rencontrerez des erreurs lors de l'écriture de programmes. Les erreurs ne sont pas nécessairement mauvaises. En fait, la plupart du temps, ils nous aident à identifier les problèmes avec notre code. Il est essentiel que vous sachiez comment déboguer votre code et corriger les erreurs.
Le débogage consiste à examiner le programme, à trouver l'erreur et à la corriger.
Il existe différentes manières de déboguer votre programme JavaScript.
1. Utilisation de console.log ()
Vous pouvez utiliser la console.log()méthode pour déboguer le code. Vous pouvez transmettre la valeur que vous souhaitez archiver dans la console.log()méthode et vérifier si les données sont correctes.
La syntaxe est:
console.log(object/message);
Vous pouvez passer l'objet console.log()ou simplement une chaîne de message.
Dans le didacticiel précédent, nous avons utilisé une console.log()méthode pour imprimer la sortie. Cependant, vous pouvez également utiliser cette méthode pour le débogage. Par exemple,
let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )
L'utilisation de la console.log()méthode dans le navigateur ouvre la valeur dans la fenêtre du débogueur.
Fonctionnement de la méthode console.log () dans le navigateur
Le console.log()n'est pas spécifique aux navigateurs. Il est également disponible dans d'autres moteurs JavaScript.
2. Utilisation du débogueur
Le debuggermot clé arrête l'exécution du code et appelle la fonction de débogage.
Le debuggerest disponible dans presque tous les moteurs JavaScript.
Voyons un exemple,
let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);
Voyons comment vous pouvez utiliser le débogueur dans un navigateur Chrome.
Fonctionnement du débogueur dans le navigateur
Le programme ci-dessus interrompt l'exécution du programme dans la ligne contenant le debugger.
Vous pouvez ensuite reprendre le contrôle de flux après avoir examiné le programme.
Le reste du code s'exécutera lorsque vous reprendrez le script en appuyant sur play dans la console.
Fonctionnement du débogueur dans le navigateur
3. Définition des points d'arrêt
Vous pouvez définir des points d'arrêt pour le code JavaScript dans la fenêtre du débogueur.
JavaScript cessera de s'exécuter à chaque point d'arrêt et vous permettra d'examiner les valeurs. Ensuite, vous pouvez reprendre l'exécution du code.
Voyons un exemple en définissant un point d'arrêt dans le navigateur Chrome.
Fonctionnement des points d'arrêt dans le navigateur
Vous pouvez définir des points d'arrêt via l'outil Developers n'importe où dans le code.
La définition de points d'arrêt est similaire à l'insertion d'un débogueur dans le code. Ici, vous définissez simplement des points d'arrêt en cliquant sur le numéro de ligne du code source au lieu d'appeler manuellement la fonction de débogage.
Dans les méthodes ci-dessus, nous avons utilisé le navigateur Chrome pour montrer les processus de débogage pour plus de simplicité. Cependant, ce n'est pas votre seule option.
Tous les bons IDE vous permettent de déboguer le code. Le processus de débogage peut être un peu différent, mais le concept de débogage est le même.
