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();
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");
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();
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.
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 !
