Gestion des erreurs et débogage

La gestion des erreurs et le débogage sont des aspects essentiels de la programmation. En effet, il est inévitable que votre code comporte des erreurs et il est donc important d’avoir des méthodes pour les identifier et les corriger.

Le chapitre sur la gestion des erreurs et le débogage en Javascript vous présentera les outils et les techniques disponibles pour identifier et corriger les erreurs dans votre code.

Nous verrons comment utiliser la syntaxe try-catch pour attraper et traiter les exceptions, comment utiliser les outils de débogage de votre navigateur pour identifier et corriger les erreurs, et enfin comment utiliser des outils et bibliothèques externes pour vous aider dans le processus de débogage.

Try-Catch

La gestion des erreurs est une partie importante de la programmation en général et en particulier en Javascript. Elle permet de prévoir et de traiter les erreurs qui peuvent survenir lors de l’exécution de notre code afin d’éviter que notre programme ne s’arrête brutalement ou qu’il ne produise des résultats inattendus.

Pour gérer les erreurs en Javascript, nous pouvons utiliser la structure de contrôle try-catch. Cette structure permet de délimiter une zone de code dans laquelle une erreur peut survenir, et de définir une « zone de capture » qui sera exécutée en cas d’erreur.

try {
  // Code pouvant lever une exception
} catch (error) {
  // Code exécuté en cas d'erreur
}

Utilisation de la méthode throw pour lever une exception

Pour lever une exception, nous pouvons utiliser la méthode « throw » suivie de l’objet d’erreur que nous souhaitons lever. Par exemple, pour lever une erreur de type « ReferenceError« , nous pouvons écrire :

throw new ReferenceError('Ma référence est incorrecte');

Cette erreur sera alors capturée par la structure catch et nous pourrons la traiter comme nous le souhaitons.

Customisation des messages d'erreur

Nous pouvons personnaliser les messages d’erreur en utilisant les propriétés de l’objet d’erreur. Par exemple, la propriété « message » permet de définir le message d’erreur affiché, tandis que la propriété « name » permet de définir le nom de l’erreur. Voici un exemple :

try {
  throw {
    name: 'MonErreurCustom',
    message: 'Une erreur est survenue',
  }
} 
catch (error) {
  console.log(error.name); // Affiche "MonErreurCustom"
  console.log(error.message); // Affiche "Une erreur est survenue"
}

Outils de débogage du navigateur

La console de votre navigateur est un outil très puissant pour déboguer votre code Javascript. Elle vous permet d’afficher et d’interagir avec votre code en temps réel. Vous pouvez y accéder en faisant un clique droit -> Inspecter

Utilisation de la console pour afficher et interagir avec le code

Vous pouvez utiliser la méthode console.log() pour afficher du texte ou des valeurs dans la console. Par exemple :

console.log("Hello World");
console.info(true);
console.warn('attention');
console.error('danger');

Vous pouvez utiliser la méthode console.log() pour afficher du texte ou des valeurs dans la console. Par exemple :

console.log(10 + 10);

Autres fonctionnalités de la console

La console offre également d’autres fonctionnalités intéressantes pour le débogage de votre code. Par exemple, vous pouvez utiliser la fonctionnalité « table » pour afficher un tableau de données de manière claire et organisée. Vous pouvez également utiliser la fonction « dir » pour afficher l’objet en question avec toutes ses propriétés et méthodes. Enfin, la console vous permet d’exécuter du code directement depuis la console grâce à la fonction « eval« . Cela peut être utile pour tester rapidement une ligne de code ou pour expérimenter avec des changements de votre code sans avoir à le ré-écrire dans votre éditeur de code.

  • La méthode console.dir() permet d’afficher l’objet passé en argument sous forme d’arborescence, ce qui peut être utile pour mieux comprendre sa structure et ses propriétés. Par exemple :
const monObjet = {
  prop1: 'valeur 1',
  prop2: 'valeur 2',
  prop3: {
    sousProp1: 'sous valeur 1',
    sousProp2: 'sous valeur 2'
  }
};
console.dir(monObjet);
  • La méthode console.group() permet de regrouper plusieurs messages sous forme de « groupe » dans la console. Vous pouvez utiliser la méthode console.groupEnd() pour fermer le groupe. Par exemple :
console.group('Groupe 1');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();
  • La méthode console.time() et console.timeEnd() permettent de mesurer le temps d’exécution d’une portion de code. Vous pouvez utiliser un label pour identifier la mesure. Par exemple :
console.time('Temps de chargement');
// Code à mesurer
console.timeEnd('Temps de chargement');

Utilisation des points d'arrêt et du débogueur

Vous pouvez utiliser les points d’arrêt pour mettre en pause votre code à un certain endroit et inspecter ce qui se passe. Pour ajouter un point d’arrêt, il suffit de cliquer sur le numéro de ligne de votre code dans le devtools de votre navigateur. Vous pouvez également utiliser le débogueur pour passer en revue votre code étape par étape. Pour lancer le débogueur, il suffit de cliquer sur le bouton « Démarrer le débogueur » dans les devtools de votre navigateur.

Outils / bibliothèques de déboggage externes

Il est également possible d’utiliser des outils ou bibliothèques externes pour déboguer son code. Ces outils peuvent souvent être intégrés directement dans l’IDE ou l’éditeur de code et offrent des fonctionnalités avancées de débogage. Voici quelques exemples d’outils populaires :

  • Node Inspector : cet outil permet de déboguer du code JavaScript côté serveur avec Node.js. Il offre des fonctionnalités similaires au débogueur intégré de Chrome, mais pour le code exécuté sur un serveur.
  • Jest : cette bibliothèque de test unitaire permet également de déboguer son code. Elle offre des fonctionnalités de snapshot testing, qui permet de vérifier que le rendu de votre code ne change pas entre les versions, ainsi que des fonctionnalités de débogage avancées.
  • Mocha : Cette bibliothèque de test est également utilisée pour le débogage, avec des fonctionnalités telles que la possibilité de créer des « breakpoints » et de suivre l’exécution de votre code.

 

Conclusion

Dans ce chapitre, nous avons vu comment gérer les erreurs et déboguer notre code en utilisant les try-catch et les outils de débogage intégrés à notre navigateur. Nous avons également évoqué l’utilisation de bibliothèques de déboggage externes, comme Jest, qui peuvent nous aider à détecter et corriger les erreurs dans notre code.

Il est important de prendre le temps de déboguer son code afin d’éviter les erreurs et de s’assurer que notre application fonctionne de manière optimale. Dans le chapitre suivant, nous allons voir comment utiliser les modules et les importations/exportations en Javascript (ES6) pour organiser et réutiliser notre code de manière efficace.

Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.