Dans ce tutoriel, vous apprendrez comment travailler efficacement avec les points d'arrêt d'exception des Outils de développement Chrome. Les points d'arrêt d'exception vous permettent de déboguer votre JavaScript en arrêtant automatiquement le programme lorsqu'une exception se produit. Cela est particulièrement utile lorsque vous souhaitez suivre et comprendre les erreurs dans le code, et savoir où et pourquoi elles se produisent. L'utilisation des points d'arrêt est une compétence essentielle pour tout développeur souhaitant s'assurer que son code est exempt d'erreurs. Plongeons directement dans les détails !
Principales conclusions
- Les points d'arrêt d'exception arrêtent le programme lorsqu'une exception se produit.
- Vous pouvez distinguer entre les Exceptions « non capturées » et « capturées ».
- L'insertion de l'instruction debugger; vous permet d'arrêter le programme à un endroit spécifique.
- Il est important de supprimer les instructions debugger; après avoir terminé le débogage pour maintenir le code de production propre.
Guide étape par étape
1. Activer les points d'arrêt d'exception
Pour activer l'arrêt automatique en cas d'exceptions, ouvrez les Outils de développement Chrome. Allez dans le menu "Sources", puis cherchez la section "Points d'arrêt". Cochez les cases "Pause on Exceptions" et "Pause on Caught Exceptions".
Le programme s'arrêtera automatiquement lorsque qu'une exception se produira. Vous pouvez le faire en utilisant le code suivant qui déclenche une simple exception.
Lorsque vous exécutez le code, le programme s'arrêtera à l'endroit où l'exception est levée.
2. Gérer les exceptions « capturées » et « non capturées »
Si vous désactivez l'option "Exceptions capturées", vous remarquerez que le programme ne s'arrête pas lors d'exceptions capturées.
Cependant, si une exception est dans un bloc try-catch, l'exception est capturée dans le bloc catch et le programme continue à cet endroit.
Ici, vous pouvez voir que l'exception a été attrapée et vous pouvez voir la sortie de la console avec l'erreur contenue dans l'exception.
3. Application à plusieurs points d'arrêt
Lorsque vous avez plusieurs points d'arrêt dans différents fichiers, cela peut devenir rapidement confus. Cependant, vous pouvez facilement désactiver tous les points d'arrêt en cliquant avec le bouton droit sur un point d'arrêt et en sélectionnant l'option "Désactiver tous les points d'arrêt".
Cela désactivera tous les points d'arrêt et vous pourrez les réactiver ultérieurement si nécessaire.
4. Utilisation de l'instruction debugger;
Une autre technique utile lors du débogage est d'insérer l'instruction debugger; dans votre code. Cela arrêter le programme à cet endroit dès que vous rechargez la page.
Lorsque vous utilisez l'instruction debugger;, rappelez-vous de la supprimer de votre code avant de passer en environnement de production, car elle n'est pas utile dans l'application en direct.
En ajoutant l'instruction debugger;, le programme s'arrête à cet endroit spécifique, vous permettant d'inspecter les variables actuelles et l'historique du programme.
5. Précautions lors du travail avec les exceptions
Lors du travail avec les exceptions, soyez prudent, en particulier si vous utilisez de nombreuses bibliothèques tierces. Celles-ci peuvent également déclencher des exceptions, et il peut être gênant si votre code s'arrête continuellement.
Lorsque vous savez que votre application génère des exceptions, il peut être utile d'activer l'option des "Exceptions non gérées" pour les repérer lors du processus de débogage.
N'oubliez pas que toute exception ne conduit pas nécessairement à un problème. Une exception peut simplement être capturée et n'affecter ainsi pas négativement l'expérience utilisateur.
Résumé
Dans ce tutoriel, vous avez appris comment utiliser les points d'arrêt d'exception dans les outils de développement Chrome pour trouver des erreurs dans votre code JavaScript. Vous avez vu comment activer et utiliser efficacement ces points d'arrêt afin de garantir le bon fonctionnement de vos applications. Comprendre et mettre en œuvre ces techniques améliorera considérablement votre efficacité de débogage.
Foire aux questions
Comment activer les points d'arrêt d'exception dans les outils de développement Chrome ?Ouvrez les outils de développement Chrome, allez dans "Sources" et activez "Pause on Exceptions" et "Pause on Caught Exceptions".
Quelle est la différence entre les exceptions "attrapées" et "non attrapées" ?Les "exceptions attrapées" sont celles qui sont traitées dans un bloc try-catch, tandis que les "exceptions non attrapées" ne sont pas capturées et sont directement transmises au gestionnaire d'erreurs.
Comment puis-je désactiver tous mes points d'arrêt ?Cliquez avec le bouton droit de la souris sur un point d'arrêt et choisissez "Désactiver tous les points d'arrêt" dans le menu contextuel.
Qu'est-ce que l'instruction debugger; et comment l'utiliser ?L'instruction debugger; est une commande JavaScript qui arrête le programme à cet endroit. Vous devriez la supprimer de votre code après le débogage.
Pourquoi devrais-je supprimer l'instruction debugger; avant de passer en production ?Cela peut entraîner un arrêt de votre application à un moment non souhaité, ce qui pourrait influencer négativement l'expérience utilisateur.
