Déboguer votre application Angular

Lorsque vient le temps de déboguer votre application JavaScript Angular, plusieurs solutions s’offrent à vous. Voici quelques trucs et astuces pour vous aider à le faire efficacement.

console.log( ) et ses amis

Un incontournable pour afficher le contenu de vos objets et variables dans la console du navigateur.

Aussi disponibles avec une sortie colorée :

Pour ceux qui veulent plus d’options de coloration, vous pouvez utiliser du CSS de la manière suivante :

dump( )

Si vous utilisez Jasmine pour vos tests, vous pouvez utiliser dump( ), qui affichera le contenu de votre variable dans le terminal lors de l’exécution de vos tests.

angular.mock.dump( )

La mise en forme de votre consol.log est difficile à lire dans votre terminal ? Vous pouvez utiliser angular.mock.dump( ) qui formatera l’objet en JSON lisible.

$logProvider

Angular offre le service $logProvider afin de simplifier votre débogage. Vous pouvez ainsi injecter $log dans vos contrôleurs.

En option, vous pourrez visualiser vos messages colorés dans votre console.

Finalement, lorsque vient le temps de passer en production, vous pouvez désactiver tous les $log.debug de la manière suivante :

https://docs.angularjs.org/api/ng/provider/$logProvider

Karma – Debug

Lorsque vous exécutez vos tests avec Karma, l’option DEBUG vous est présentée en haut à droite de l’interface web. Vous pouvez cliquer sur ce bouton afin d’ouvrir la page d’exécution de vos tests. Une fois à l’intérieur, vous pouvez ajouter vos points d’arrêts et déboguer votre application et vos tests.

Points d’arrêt avec Chrome

Bien entendu, Chrome vous offre la possibilité d’ajouter des points d’arrêt (breakpoint) afin de déboguer votre code JavaScript. Vous pourrez ainsi inspecter l’état des variables et procéder à l’exécution pas à pas. Vous pouvez aussi suivre la formation sur les outils de développement de Chrome.

Ctrl-O ou CMD-O

Lorsque vient le temps de mettre un point d’arrêt dans votre code JavaScript, plusieurs étapes sont nécessaires. Ouvrir les outils du développeur, naviguer vers la section Sources, naviguer à travers la structure des dossiers afin d’y trouver votre fichier .js et finalement, identifier l’endroit où ajouter votre point d’arrêt.

Utiliser Ctrl-O ou CMD-O pour trouver votre fichier plus rapidement.

Batarang

Batarang est une extension pour Chrome qui vous permet de mieux visualiser et déboguer votre application Angular JS.

Batarang screenshot

https://chrome.google.com/webstore/detail/angularjs-batarang-stable/niopocochgahfkiccpjmmpchncjoapek

https://github.com/angular/batarang

Postman

Postman est l’outil idéal pour créer des requêtes et les soumettre à votre API Rest. Avec Postman, vous sélectionnez l’URL, votre méthode (GET, POST, PUT, …) et lancez la requête.

postman - capture écran

 

https://www.getpostman.com/

JSON VIEW

Il est parfois difficile de lire le JSON retourné par le serveur. JSON View est un plugin chrome qui met en forme le JSON pour le rendre lisible.

http://jsonview.com/

 

Références

 

Comments

comments

0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.