Le débogage en JavaScript implique d'identifier et de corriger les erreurs en analysant le comportement d'exécution, en traçant le flux du programme et en utilisant des outils tels que les consoles de navigateur, les débogueurs et les techniques de journalisation. Vous trouverez ci-dessous différentes méthodes de débogage en JavaScript.
1. Utilisation du mot-clé du débogueur
Le mot-clé debugger force le moteur JavaScript à arrêter l'exécution à un certain moment. Lorsqu'il est rencontré, il suspend l'exécution du code et ouvre l'outil de débogage du navigateur.
Syntaxe:
débogueur ;
Exemple:

function sum(a, b) { 
   debugger; // Execution stops here 
   return a   b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

Cela vous permet d'inspecter les variables et l'état du programme à ce moment précis à l'aide des outils de développement du navigateur.
2. Utilisation de console.log()
console.log() génère des données sur la console du navigateur, vous aidant à tracer les valeurs et le déroulement du programme pendant l'exécution.
Syntaxe:

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: "   name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

En plaçant des instructions console.log() dans votre code, vous pouvez vérifier si les variables contiennent les valeurs attendues.
3. Utiliser des points d'arrêt
Les points d'arrêt peuvent être définis directement dans les outils de développement du navigateur. Ils arrêtent l'exécution du code sur une ligne spécifique, vous permettant d'inspecter l'état du programme à ce moment-là.
Étapes pour définir des points d'arrêt :

1. Ouvrez les outils de développement (appuyez sur F12 ou cliquez avec le bouton droit et sélectionnez Inspecter).
2. Accédez à l'onglet Sources.
3. Sélectionnez le fichier JavaScript, puis cliquez sur le numéro de ligne pour définir un point d'arrêt.
4. L'exécution du code s'arrêtera sur cette ligne et toutes les variables et tous les états pourront être inspectés. Exemple:

function multiply(a, b) { 
   return a * b; 
} 

soit le résultat = multiplier (2, 5);
// Définissez un point d'arrêt ici et inspectez les valeurs
Dans cet exemple, après avoir défini un point d'arrêt sur la fonction multiplier(), vous pouvez inspecter les valeurs de a et b dans les outils de développement.
4. Utilisation de console.warn() et console.error()
Ces méthodes fonctionnent comme console.log(), mais le résultat est visuellement distinct dans la console, permettant de différencier les avertissements ou les erreurs.
Syntaxe:

console.warn(message); 
console.error(message);

Exemple:

let age = 17; 

if (age 



Dans ce cas, console.warn() affichera un message d'avertissement jaune, tandis que console.error() affichera une erreur en rouge.

5. Utilisation des instructions try…catch

try…catch est utilisé pour gérer les erreurs d'exécution avec élégance, vous permettant de consigner les erreurs et d'empêcher l'application de planter.

Syntaxe:



try { 
   // Code that may throw an error 
} catch (error) { 
   console.error(error.message); 
} 




Exemple:



 try { 
   let result = JSON.parse("invalid JSON string"); 
} catch (error) { 
   console.error("An error occurred: ", error.message); 
   // Logs error without stopping the app 
}




Le bloc try…catch détectera l'erreur d'analyse JSON et l'enregistrera dans la console sans planter l'application.

6. Utilisation des outils de surveillance des performances

Pour le débogage des performances, l'onglet Performances des outils de développement permet de surveiller le temps d'exécution des fonctions, l'utilisation de la mémoire et les goulots d'étranglement des performances.

Mesures:


Ouvrez les outils de développement (appuyez sur F12).
Accédez à l'onglet Performances.
Cliquez sur Enregistrer pour commencer à surveiller l'exécution du code.
Effectuez des actions dans votre application pour collecter des données.
Arrêtez l'enregistrement pour analyser la chronologie des performances.
Exemple:



console.time("loop"); 
for (let i = 0; i 



Cet exemple utilise console.time() et console.timeEnd() pour mesurer le temps d'exécution d'un bloc de code.

En appliquant ces méthodes et des techniques plus avancées telles que la surveillance des performances, vous pouvez déboguer et résoudre efficacement les problèmes dans votre code JavaScript.

Si vous apprenez JavaScript, assurez-vous de suivre mes tutoriels étape par étape sur Medium : https://medium.com/@CodingAdventure