Angular : Les tests et le débogage

Évaluer son code à l'aide d'une source map

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous apprendrez à utiliser les source maps afin d'évaluer votre code dans votre browser (explorateur).
04:36

Transcription

Le sourceMap est un outil très utile quand vous avez besoin de faire du débogage dans les outils de votre navigateur. Je vous montre : tout d’abord, retournez dans votre E.store favori, dans mon cas, c’est VS Code, et vous allez dans la section app ici. Donc, cliquez sur source, app, ensuite dashboard, et cliquez sur dashboard.component.ts. L’autre fichier que nous allons ouvrir est dans les configurations ici. Si vous allez tout en bas du dossier principal, donc si vous allez à la base du dossier, vous avez un fichier qui s’appelle tsconfig.json. Cliquez sur ce fichier et vous allez voir sourceMapfalse ou true Donc qu’est ce qu’on veut, c’est que cette mention ici soit à true, ce qui va faire que votre application va pouvoir créer les sources Map que nous allons pouvoir utiliser dans le browser. Donc, on va faire true ici et on sauvegarde avec commande S. La prochaine chose, nous allons retourner dans le dossier que nous étions, donc dashboard, dashboard.component.ts, qu’est ce que nous allons faire ? Nous allons insérer dans le code ici, un debugger. Et si vous êtes pas familier avec debugger, c’est la manière qu’on peut insérer des pauses dans notre application et vérifier le code dans cette section. Donc, on va le faire un debugger comme ça, on sauvegarde avec commande S, et l’application devrait se rafraîchir ici et automatiquement est posée dans notre code où ce qui est marqué debugger. Donc, en faisant le sourceMap, qu’est ce que ça fait ? C’est que ça nous donne la possibilité d’aller dans le code, dans le fichier exactement où est le problème, et puis débugger directement, ici. Comme vous pouvez voir ici, nous avons notre mention de debugger, donc si on voulait inspecter notre application directement dans cette section, c’est le meilleur moyen de le faire. Et en ayant le sourceMap, on voit le code exactement comme dans l’application versus le code qui est compilé comme si on le voit ici, main bundle, c’est une icône qui est incomprenable et illisible, on veut voir quelque chose qui ressemble plus à notre application. Et puis, on peut être en mesure de voir l’information ce qu’elle est. Si jamais vous passez de l’information, si vous avez des données qui viennent d’un serveur de service, et puis que vous avez de l’information qui est updatée, en théorie aussi, vous devriez voir où est ce que l’information elle est. Par exemple, si on a créé un array, donc ici, on a créé un tableau qui est vide, mais si jamais, on avait de l’information dans le tableau, si on avait des données qui avaient été passées directement ici, on aurait pu voir l’état de l’information. Si on avait un debugger directement au dessous de cette ligne, la ligne 11 ici. Donc, c’est un très bon moyen d’inspecter notre application, de voir l’information, les données où est ce qu’ils sont, quand que notre application elle marche. Également, quand vous voulez passer au travers du debugger, tout ce que vous avez à faire est de cliquer sur le resume ici ou directement, dans les outils développeurs, ici. et ça va passer à la prochaine fonction, donc compléter le chargement de l’application en tant que tel. Et on peut voir le stack ici, on peut voir qu’est ce qui se passe et on a toujours accès à notre code. La deuxième chose, si on veut rafraîchir l’application comme ça ici, donc elle va poser encore où ce qu’il y a notre debugger. On peut voir l’état de l’application où est ce qu’elle est dans Augury, ici. Donc, on clique sur Augury, après ça, component tree ici, on peut voir le state de notre application ici. Donc, si on clique ici, il y a absolument rien, il n’y a pas d’hero, on n’a pas de state qui est passé dans le dashboard, on continue avec l’application, on passe par-dessus du debugger, et puis maintenant, vous voyez que le state a été updaté après que le hero service a été appelé et passé dans les données ou dans le tableau qu’on a créé. Et maintenant, on a de l’information, donc si on clique ici, on va avoir chacun des items dans notre dashboard. Donc le state, vous voyez que l’information comme on l'a vu antérieurement. Donc, c’est très important d’utiliser le sourceMap, quand on est en période d’inspection, surtout s’il y a des erreurs dans l’application, c’est un bon moyen de voir où est ce qu’ils sont les problèmes, où est ce qu’on doit changer notre code, et en insérant des debugger un peu partout, on peut passer au travers de l’inspection de l’application dans le temps où elle est chargée.

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 !