Angular : Les tests et le débogage

Découvrir d'autres outils pour les développeurs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez parcourir plusieurs outils disponibles et très utiles pour les développeurs et pour le débogage dans Angular.
06:36

Transcription

Maintenant, j'aimerais vous montrer quelques autres outils qui des fois, pourraient éclaircir votre débugage, si vous ne trouvez pas la solution à un problème. La première habitude à prendre, si vous n'utilisez pas cette fonction dans votre JavaScript, c'est très important de l'utiliser. Et ça s'appelle console.log. Ça serait en tout temps quand vous avez des doutes ou vous ne savez pas d'où vient l'erreur, c'est très important de prendre console.log. Je vais vous donner un exemple. Comme, par exemple ici, on a une fonction qui va chercher les Heroes, donc un coup, cette fonction exécute, automatiquement, on a les quatre Top Heroes ici et avant qu'elle exécute, on a rien ici. Donc, on va aller faire un console.log avant ici, donc console.log et puis, on va aller chercher la liste des Heroes ici, donc on va aller faire this.heroes, comme cela, donc, en théorie, si on sauvegarde ça en ce moment, on devrait avoir un tableau qui est vide. On va aller dans la console, donc, option Command-e et puis, on a un tableau qui n'a absolument rien dedans. OK, tout est normal, on voit même la ligne de où ce qu'on a fait notre code ici, si on clique dessus on va le voir, console.log, tout est bon. On retourne à la console, on retourne à notre programme, donc, c'est ici, this.getHeroes qu'on applique le nouveau tableau avec l'information. On met à jour le tableau Heroes ici, avec cette fonction, ici. Donc, la meilleure méthode pour savoir si vraiment on a l'information, c'est d'insérer un console.log dans notre fonction, ici. Donc, vous pouvez pas passer un console.log, si vous êtes dans une classe. Je pourrais pas faire un console.log ici. Faut le faire dans une fonction. Donc, on va changer notre fonction courte, à une fonction avec toutes nos items, donc on va passer l'argument ici, on va ouvrir notre fonction avec une accolade, on va la fermer avec une accolade ici, comme ça, et on va passer ici, la commande console.log et puis on passe this.heroes. Comme ça on va vérifier ici, avant la fonction, quel est le tableau ou quelle est l'information ou les données dans le tableau et puis, pendant que la fonction a un rôle ici, on va s'assurer qu'on a bien compris qu'est-ce qui rentre dans cette fonction, ici. Donc, on sauvegarde ça, ici. On retourne ici et on voit notre tableau avant la fonction et on voit notre tableau rempli d'informations, ici. Et on voit les informations, chaque objet avec les informations, ici. Donc, console.log est vraiment une fonction qui est très utile pour vérifier votre application, qu'est-ce qui se passe, quand ça se passe et ainsi de suite. Les autres outils qu'on peut utiliser quand on a une application, comme je vous ai présenté tantôt c'est Augury, avec Augury, vous avez finalement les composantes ici, vous avez également un Router Tree qui vous donne les routes de l'application, donc chaque route si on clique sur Dashboard, bon, vous avez le DachboardComponent ici, donc la route Dashboard, comme on peut voir ici dans l'exemple, si on clique dans le héros ici, on a la route HeroDetailComponent, qui est detail, puis les deux points id, comme ça et ensuite, on a toutes les NgModules qui sont chargées dans l'application ici, donc, si on enlève encore le HttpClientModule ici, on va le voir disparaître de cette tab ici, donc on va aller l'enlever encore une fois, donc si vous voulez suivre, vous pouvez aller dans app.module.ts, enlever ou mettre un commentaire ici, comme ça, on va sauvegarder, on va retourner dans l'application et comme vous venez de voir, il a disparu de nos NgModules. Donc, si vous cliquez sur hero.service.ts, vous allez voir que le HttpClient est utilisé ici et est utilisé dans le constructor, donc si on ne l'injecte pas dans notre application, on va avoir un petit problème. Donc, quand vous montez votre application, que vous créez des nouvelles injections, que vous rajoutez des composants, des choses comme ça, assurez-vous que tout est bien lié, tout à la bonne syntaxe, ainsi de suite. Et le terminal de votre éditeur, le terminal de votre console ici, sont les meilleurs outils. Ensuite, on peut aller voir dans Augury, pour savoir quelles sont les composantes, quelles sont les routes, les modules qui sont dans votre application et si ça concorde avec qu'est ce que vous avez bâti, donc vous n'avez pas de problème. L'autre chose qui peut être à vérifier également, c'est d'aller voir dans les éléments, si jamais vous avez des problèmes de style avec votre css, vous pouvez aller voir le style qui est appliqué ici, vous pouvez même changer les choses ici, si on veut changer la couleur de quoi que ce soit et ainsi de suite, là comme vous pouvez voir ici, je change la couleur du Hero Search, donc, j'étais ici, je peux changer les choses directement dans mon application, quand on repart l'application, on perd ces changements, ceux-ci sont pour faire des tests, si vous voulez, ensuite, vous pouvez copier ce que vous avez fait ici, dans vos styles si vous voulez le changer, donc, c'est un nom de classe que vous pouvez regarder. Évidemment, l'application qui est chargée en finale toutes les items sont ici, donc, si vous voulez aller voir les éléments et ainsi de suite, pour voir les styles, pour voir ce qui est chargé dans votre application, c'est l'autre place que j'irais. Donc, ceux-ci sont les outils pour vérifier les débugages, pour aller vérifier votre application, c'est un bon départ. Je vais aller dans le terminal pour vous donner un exemple, donc Afficher, Terminal intégré, on arrête l'application avec contrôle-c et puis après ça, si vous voulez voir la commande que je fais, elle est listée dans le package.json ici et vous pouvez voir, il y a le ng, le build, donc quand vous êtes prêt, vous avez fini le développement, vous avez fini le débugage, vous pouvez faire un ng build et puis vous allez bâtir ou charger votre application en mode production.

Angular : Les tests et le débogage

Découvrez les erreurs communes de cet environnement de développement telles que les erreurs d'injection ou de transformation de données, ainsi que les bonnes pratiques de conduite de tests.

1h24 (20 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :7 juin 2018

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !