Maison > interface Web > js tutoriel > Maîtriser la gestion des erreurs en JavaScript

Maîtriser la gestion des erreurs en JavaScript

Patricia Arquette
Libérer: 2024-12-25 04:45:20
original
196 Les gens l'ont consulté

Mastering Error Handling in JavaScript

Maîtriser la gestion des erreurs en JavaScript

Date : 19 décembre 2024

La gestion des erreurs est une compétence essentielle pour tout développeur JavaScript. Une solide compréhension des erreurs et de la manière de les gérer garantit que votre application peut se remettre facilement des problèmes et offrir une expérience utilisateur transparente. Cet article couvrira les types d'erreurs, la création de classes d'erreurs personnalisées et les techniques de débogage.


Types d'erreurs en JavaScript

Les erreurs JavaScript peuvent être classées en trois types :

1. Erreurs de syntaxe

Des erreurs de syntaxe se produisent lorsque le moteur JavaScript ne peut pas analyser votre code en raison d'une syntaxe non valide. Ceux-ci sont détectés au moment de la compilation avant l'exécution du code.

Exemple :

console.log("Hello World // Missing closing quotation mark
Copier après la connexion
Copier après la connexion

Comment réparer :

Assurez-vous d'une syntaxe appropriée en utilisant un IDE ou un éditeur avec coloration syntaxique.


2. Erreurs d'exécution

Des erreurs d'exécution se produisent lorsque le code est syntaxiquement correct mais ne parvient pas à s'exécuter pendant l'exécution. Celles-ci sont souvent causées par le référencement de variables ou de fonctions qui n'existent pas.

Exemple :

let a = 5;
console.log(b); // ReferenceError: b is not defined
Copier après la connexion
Copier après la connexion

Comment réparer :

Recherchez des variables non définies ou des appels de fonction incorrects.


3. Erreurs logiques

Des erreurs logiques se produisent lorsque le code s'exécute sans générer d'erreur mais produit des résultats incorrects en raison d'une logique défectueuse.

Exemple :

function calculateSum(a, b) {
  return a - b; // Incorrect operator
}
console.log(calculateSum(5, 3)); // Outputs 2 instead of 8
Copier après la connexion
Copier après la connexion

Comment réparer :

Déboguez et examinez votre logique pour vous assurer qu'elle correspond au résultat attendu.


Erreurs personnalisées en JavaScript

La création de classes d'erreurs personnalisées vous permet de définir des erreurs spécifiques aux besoins de votre application.

Étapes pour créer des erreurs personnalisées :

  1. Étendez la classe d'erreur intégrée.
  2. Définissez le message d'erreur et le nom.

Exemple :

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

function validateAge(age) {
  if (age < 18) {
    throw new ValidationError("Age must be 18 or above.");
  }
}

try {
  validateAge(16);
} catch (error) {
  console.error(`${error.name}: ${error.message}`); // Outputs: ValidationError: Age must be 18 or above.
}
Copier après la connexion
Copier après la connexion

Techniques de débogage en JavaScript

Le débogage est une partie essentielle du développement. Vous trouverez ci-dessous quelques méthodes et outils courants pour déboguer les applications JavaScript.

Utiliser les méthodes de la console

L'objet console propose plusieurs méthodes de débogage :

  • console.log() : Enregistre les informations générales.
console.log("Hello World // Missing closing quotation mark
Copier après la connexion
Copier après la connexion
  • console.error() : enregistre les erreurs en rouge pour une meilleure visibilité.
let a = 5;
console.log(b); // ReferenceError: b is not defined
Copier après la connexion
Copier après la connexion
  • console.warn() : enregistre les avertissements.
function calculateSum(a, b) {
  return a - b; // Incorrect operator
}
console.log(calculateSum(5, 3)); // Outputs 2 instead of 8
Copier après la connexion
Copier après la connexion
  • console.table() : affiche les données sous forme de tableau.
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

function validateAge(age) {
  if (age < 18) {
    throw new ValidationError("Age must be 18 or above.");
  }
}

try {
  validateAge(16);
} catch (error) {
  console.error(`${error.name}: ${error.message}`); // Outputs: ValidationError: Age must be 18 or above.
}
Copier après la connexion
Copier après la connexion

Outils de débogage dans les navigateurs modernes

Les navigateurs modernes fournissent des outils intégrés pour aider à déboguer efficacement le code JavaScript.

  1. Onglet Console :

    • Utilisez la console pour enregistrer les erreurs, les avertissements et autres messages.
    • Tapez directement les commandes JavaScript pour des tests rapides.
  2. Onglet Sources :

    • Définissez des points d'arrêt pour suspendre l'exécution sur des lignes de code spécifiques.
    • Parcourez votre code ligne par ligne.
  3. Onglet Réseau :

    • Surveillez les appels, les réponses et l'activité du réseau de l'API.
    • Problèmes de débogage liés à la récupération de données ou à des erreurs de serveur.
  4. Onglet Performances :

    • Analyser et optimiser les performances des applications.
    • Identifiez les scripts à chargement lent ou les goulots d'étranglement.

Meilleures pratiques pour la gestion des erreurs

  1. Utilisez les blocs Try-Catch : Enveloppez les blocs de code risqués pour gérer les erreurs potentielles avec élégance.
  console.log("This is a log message");
Copier après la connexion
  1. Valider les entrées : Validez les entrées de l'utilisateur pour éviter les erreurs pendant l'exécution.
  console.error("This is an error message");
Copier après la connexion
  1. Erreurs de journal :
    Enregistrez les erreurs sur la console ou sur un outil de surveillance externe pour le débogage.

  2. Dégradation gracieuse:
    Fournit une fonctionnalité de secours lorsque des erreurs se produisent.


En maîtrisant la gestion des erreurs et le débogage, vous pouvez écrire du code résilient qui gère efficacement les scénarios inattendus. Entraînez-vous à identifier et à résoudre les erreurs dans vos applications pour devenir un développeur plus confiant et plus compétent !

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal