Débogage d'applications dans AngularJS

Le processus de débogage dans toute application est très important, la principale caractéristique de Javascript c'est qu'il s'exécute sur le client, c'est pourquoi ce processus est effectué directement dans le navigateur, cela génère parfois un peu d'agacement chez les développeurs plus experts, cependant ce n'est qu'un détail de plus que nous devons prendre en compte.
Dans le débogage passé Javascript c'était terrible car il n'y avait pas d'outils comme Pyromane que nous avons dans notre quotidien, donc nous nous développons dans Javascript C'était une torture, de nos jours les différentes consoles de navigateur nous montrent mieux le chemin que suit notre application.
Voyons ci-dessous certaines choses que nous devons garder à l'esprit lorsque nous voulons déboguer notre code Javascript, rappelez-vous que c'est la langue dans laquelle il est AngularJS ils sont donc directement liés :

• Il est impératif de travailler avec les versions non compressées ou minifié à partir des fichiers JS, puisque de cette façon, nous aurons accès à la ligne de code correcte dans laquelle l'erreur se produit, nous aurons en outre les noms corrects des variables où certains outils peuvent nous donner des informations plus détaillées sur l'erreur.

• Pour plus de commodité, il est préférable de conserver le code JS dans des fichiers séparés de l'archive. HTML qui les exécute, rendant notre code plus gérable.

• L'utilisation de Points d'arrêt et outil Pause sur toutes les exceptions Ils nous aident à arrêter l'application lorsqu'une erreur survient, avec cela nous pourrons isoler le problème plus rapidement, et ainsi trouver la solution pertinente.

Comme nous l'avons mentionné au début, il n'y avait aucun outil dans le passé qui nous permettrait d'évaluer notre code Javascript De manière appropriée, avec les navigateurs modernes, nous avons presque toujours une console disponible où nous pouvons voir le comportement du Javascript, par exemple dans Google Chrome nous avons les outils de développement que nous pouvons obtenir en appuyant sur la touche F12.

AGRANDIR

Cependant voir le déroulement de notre application faite en AngularJS nous avons un outil encore plus puissant appelé Batarang, qui, une fois installé, nous permet de voir l'état actuel de notre application, d'examiner les appels entre les contrôleurs et les modèles, entre autres fonctionnalités.
Intégration ChromeCet outil se fixe directement sur Google Chrome aux outils de développement et ajoute un nouvel onglet avec lequel nous pouvons commencer à obtenir les informations dont nous avons besoin, telles que les performances de notre application, les erreurs, le chemin suivi par les variables au sein de notre processus, etc.
En plus de tout cela Pyromane C'est aussi un outil important, car il nous permet d'obtenir des informations de la part des Ajax et les différentes variables ou paramètres qui sont passés lors de celles-ci.
Avec cela nous terminons ce tutoriel, nous avons découvert plusieurs outils qui sont à notre disposition pour développer nos applications en AngularJS et avoir le contrôle de la façon d'afficher les informations lorsque des erreurs s'y produisent.