Maîtriser le débogage JavaScript : les meilleures techniques pour les débutants

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 des consoles de navigateur, des débogueurs et des 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() envoie des données à 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 tout 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 faites un clic droit et sélectionnez Inspecter).
2. Allez dans 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 result = 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 < 18) { 
   console.warn("Warning: User is underage."); 
} else { 
   console.log("User is an adult."); 
} 

if (age < 0) { 
   console.error("Error: Age cannot be negative."); 
}

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 :

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

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.
Étapes :

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!