Mar 27 2017

AngularJS – Debugger un controller ou un service depuis la console du navigateur

Voilà bien longtemps que j’avais pas écrit d’article.
Changeons un peu de .NET et allons voir du côté du framework AngularJS de Google.

Pour celles et ceux ayant déjà développé une application web avec AngularJS, on est parfois tenté de vouloir debugger un controller ou un service.

Bien sûr, on peut placer des breakpoints en utilisant l’onglet “Sources” du navigateur ou en plaçant des instructions debugger dans le code (à éviter car peut engendrer des comportements bizarres pour vos utilisateurs). Mais cela peut vite devenir fastidieux, surtout si votre application est consistante (l’arborescence devient complexe) ou si votre code est minifié.

Voici donc un moyen pour debugger facilement un controller ou un service AngularJS depuis la console de votre navigateur.

Cette astuce vous permet de :

  • Tester une valeur dans une controller ou un service
  • Tester une fonction
  • Modifier une valeur dans le controller

Fonctionne avec tous les navigateurs (Internet Explorer, Chrome, Firefox…)

Voici les étapes :

1. Ouvrez votre navigateur puis rendez-vous sur votre site / application web

2. Ouvrez votre console (en appuyant sur F12)

3. Récupérez l’injecteur Angular

var injector = window.angular.injector();

Récupération de l'injecteur AngularJS

4. A l’aide de l’injecteur, accédez à votre controller ou à votre service

Exemple avec un service appelé mobileService contenant des méthodes permettant de savoir si l’utilisateur utilise un iPhone, un smartphone Android etc.

var mobileService = injector.get("mobileService");

Récupérer du service MobileService

5. Testez votre controller ou votre service

Le service est stocké dans la variable mobileService. Vous pouvez l’utiliser directement depuis la console et le tester.

mobileService.isMobile();

Test de la méthode isMobile

Exemple d’utilisation

Dans mon exemple, pour les méthodes :

  • isIphone : retourne vrai si « iPhone« , « iPad » ou « iPhone » est trouvé dans la chaîne $window.navigator.userAgent
  • isAndroid : retourne vrai si « Android » est trouvé dans la chaîne $window.navigator.userAgent

 

Le navigateur Chrome permet de simuler le comportement sur un device mobile tel qu’un Galaxy S5, un iPhone ou un iPad. Activez la Device Toolbar de Chrome et sélectionnez le device que vous souhaitez simuler.

Activation mode Device de Chrome

Ainsi, vous pouvez vérifier le bon comportement de vos méthodes.

Et pour finir, le tout en une ligne :

var mobileService = window.angular.injector().get("mobileService");

 

Bon dev !

Articles similaires:

Lien Permanent pour cet article : http://jbvigneron.fr/2017/03/27/angularjs-debugger-controller-service-depuis-console-navigateur/

Laisser un commentaire

Your email address will not be published.

css.php