Augury est un outil open-source permettant aux développeurs de profiler et de déboguer Angular 2 et 4.

Les navigateurs Web modernes fournissent des consoles de développeurs pour inspecter divers éléments de la page, ce qui est très pratique quand essayer de déboguer le balisage, les styles et les scripts. Cependant, cette console n'est pas suffisante pour déboguer les applications Angular qui ont généralement beaucoup de composants, d'événements, d'attributs et un système de routage séparé.

Augury est un outil spécialement conçu pour les applications Angular. Il s'agit d'un outil de débogage et de profilage Open Source pour les applications Angular 2+ .

Augury est une extension Chrome assez simple à utiliser, vous n'aurez donc pas besoin de passer des heures et des heures à apprendre à utiliser cet outil. Nous allons construire un exemple d'application Angular puis voir Augury en action en explorant différentes parties de notre projet. Alors, commençons!

Bonjour, Augury!

Augury visualise la structure de votre application sous la forme d'un arbre, montrant comment les composants et leurs dépendances sont liés les uns aux autres. Il vous permet également d'inspecter les propriétés de vos objets et de les modifier à la volée. En plus de cela, vous pouvez facilement voir le code source d'un composant spécifique, insérer des points d'arrêt si nécessaire, travailler avec des événements, et plus encore. Enfin, vous pouvez parcourir le système de routage de l'application, ainsi que voir la liste complète de tous les modules utilisés.

Augury est uniquement disponible en extension Chrome (malheureusement, il n'y a pas encore de support Firefox) et l'installation est aussi simple que à cette page et en appuyant sur le bouton Installer . Après cela, vous pouvez ouvrir les outils de développement en appuyant sur Ctrl + Maj + I (Windows / Linux) ou Cmd + ] Opt + I (macOS). Vous remarquerez qu'un nouvel onglet appelé Augury est apparu. Après avoir basculé vers cet onglet, vous verrez la structure de l'application ou la phrase "Cette application n'est pas une application Angular". J'ai remarqué que parfois il peut être nécessaire de rouvrir la Developer Console pour qu'Aurury analyse correctement la page, alors faites attention.

Maintenant que nous avons installé Augury, passons à la section suivante et préparons le exemple d'application que nous allons utiliser comme terrain de jeu.

Construire un exemple d'application

Pour voir Augury en action, nous avons besoin de quelque chose à déboguer, non? Dans cette section, je vais vous guider rapidement dans le processus de création d'une application très simple (basée sur l'exemple d'application du tutoriel officiel de Angular ) listant quelques utilisateurs et vous permettant de les éditer. Sinon, vous pouvez récupérer le code source de mon GitHub repo .

Avant de commencer, installez Angular CLI sur votre machine si vous ne l'avez pas encore:

 npm install -g @ angulaire / cli

Ensuite, créez le squelette de notre nouveau projet:

 ng nouveau sitepoint-augury

Modifier le titre de l'application en modifiant le fichier src / app / app.component.ts :

 // ...

classe d'exportation AppComponent {
  title = 'Démo Augury';
}

Tweak le src / app / app.component.html en supprimant tous les liens vers la documentation ajoutée automatiquement par le générateur de code et ajouter une ligne :

  

     Bienvenue sur {{title}} !
  


 

Bien sûr, nous avons besoin d'un composant User alors générez-le maintenant en exécutant:

 ng générer des utilisateurs de composants

Modifiez le fichier src / app / users / user.component.ts de la manière suivante:

 import {Component, OnInit} à partir de '@ angular / core';
importer {Utilisateur} à partir de './user.model'; // <--- 1
importez {UserService} à partir de './user.service'; // <--- 2

@Composant({
  sélecteur: 'utilisateurs de l'application',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
la classe d'exportation UsersComponent implémente OnInit {
  utilisateurs: Utilisateur [];

  selectedUser: Utilisateur;

  onSelect (utilisateur: Utilisateur): void {// <--- 3
    this.selectedUser = utilisateur;
  }

  constructeur (userService privé: UserService) {} // <--- 4

  ngOnInit () {
    this.getUsers (); // <--- 5
  }

  getUsers (): void {// <--- 6
    this.users = this.userService.getUsers ();
  }

}

Principaux éléments à noter ici:

1. Nous importons un modèle User qui sera créé dans un instant
2. Nous importons également un UserService . Il retournera simplement une liste d'utilisateurs codés en dur, mais supposons qu'ils sont récupérés à partir d'un emplacement distant.
3. Nous permettons aux utilisateurs d'être sélectionnés en cliquant dessus. L'utilisateur actuellement sélectionné est stocké dans un attribut selectedUser séparé
4. Accrocher le userService en utilisant le mécanisme d'injection de dépendances.
5. Charger la liste des utilisateurs une fois le composant initialisé .
6. Pour obtenir des utilisateurs, nous utilisons notre userService .

C'est à peu près tout pour ce composant.

Ensuite, créons un modèle dans un src / app / users / user.model.ts fichier. Chaque utilisateur va avoir un identifiant, un prénom et un nom:

 export class User {
  id: numéro;
  premier: chaîne;
  dernier: chaîne;
}

Rien de complexe.

Passons maintenant au service UserService qui va être défini dans le fichier app / src / users / user.service.ts :

 import {Injectable} à partir de '@ angular / core';
importer {Utilisateur} à partir de './user.model';

@Injectable ()
exporter la classe UserService {

  constructeur () {}

  getUsers (): Utilisateur [] {
    retour [
      {
        id: 1,
        first: 'John',
        last: 'Doe'
      },
      {
        id: 2,
        first: 'Margaret',
        last: 'Brown'
      }
    ]
  }
}

La méthode getUsers renvoie simplement un tableau d'utilisateurs avec des données codées en dur

Maintenant, montrons nos utilisateurs avec l'aide de ngFor . En outre, nous allons ajouter un écouteur d'événement click et déclencher onSelect chaque fois qu'un utilisateur clique dessus. Lorsque cela se produit, un formulaire pour éditer l'utilisateur choisi doit être affiché (ce qui va être fait avec l'aide de ngIf ). Modifiez le fichier src / app / users / user.component.html comme suit:

  
 {{user.last}}, {{user.first}} (ID: {{user.id} }) 



  
 Modifier 
   Premier 
  

   Dernier 
  

Nous attribuons une classe CSS .selected à l'utilisateur choisi, ajoutons donc un style simple à l'intérieur du src / app / users / user.component.css fichier:

 .selected {
  font-weight: gras;
}

Enfin, nous devons importer FormsModule et UserService dans le fichier src / app / app.module.ts :

 import {BrowserModule} à partir de '@ angular / platform-browser';
importer {NgModule} à partir de '@ angular / core';
importer {FormsModule} à partir de '@ angular / forms'; // <---
importez {UserService} à partir de './users/user.service'; // <---

importez {AppComponent} à partir de './app.component';
importer {UsersComponent} à partir de './users/users.component';

FormsModule doit être répertorié dans la section importations dans app.module.ts alors que UserService va au ] fournisseurs :

 @NgModule ({
  déclarations: [
    AppComponent,
    UsersComponent
  ],
  importations: [
    BrowserModule,
    FormsModule // <---
  ],
  fournisseurs: [
    UserService // <---
  ],
  bootstrap: [AppComponent]
})

C'est tout! Notre exemple d'application est terminé et vous pouvez l'ouvrir en exécutant la commande suivante:

 ng serve --open

Component View

Très bien, alors regardons maintenant les goodies qu'Aurury a à nous offrir. Ouvrez Chrome et accédez à http: // localhost: 4200 . Une liste d'utilisateurs devrait être affichée. Presse Ctrl + Décalage + I ou Cmd + Opt + I inversez dans l'onglet Augury et appuyez sur AppComponent dans le volet gauche, sous l'arborescence de composants :

Il y a deux volets ici :

• À gauche, vous pouvez voir l'arborescence de composants qui contient une liste des composants de l'application, correctement imbriqués.
• À droite, il y a un panneau Propriétés le composant sélectionné. Notre composant AppComponent a une seule propriété titre qui est affiché à côté de sa valeur (annotée avec une flèche).

Ce qui est intéressant dans le volet Propriétés est vous pouvez changer les valeurs selon vos besoins et observer instantanément les changements. Par exemple, essayez de modifier le titre :

En outre, il existe un lien Afficher la source à côté du nom du composant. L'appuyer affichera le code source du composant choisi, où vous pourrez facilement insérer des points d'arrêt pour arrêter l'exécution du code à un point arbitraire:

Revenons maintenant au Arbre des composants et sélectionnez UsersComponent . Dans l'onglet Propriétés nous verrons un tableau d'utilisateurs (point # 1 dans la capture d'écran ci-dessous) ainsi que UserService répertorié dans la section Dépendances (# 2):

Ensuite, essayons d'afficher la source du composant UsersComponent . Lorsque l'onglet correspondant s'ouvre, vous pouvez insérer un point d'arrêt à, par exemple, la ligne 16 qui indique this.selectedUser = user; . Pour insérer un point d'arrêt, cliquez simplement sur le numéro de ligne. Ensuite, essayez de sélectionner un utilisateur et vous verrez ce qui suit:

Donc, l'exécution du code est en pause et l'utilisateur actuellement sélectionné est affiché dans ce boîte orange. Une fois que vous avez débogué cette ligne, vous pouvez appuyer sur le bouton Resume Script Execution :

Le programme se poursuit et s'arrête au prochain point d'arrêt ou finir son travail. Les points d'arrêt peuvent être très utiles si vous pensez que l'application ne se comporte pas correctement en raison du traitement incorrect des données par une méthode spécifique. Vous pouvez avoir autant de points d'arrêt que nécessaire, ce qui vous permet d'explorer progressivement le script et de comprendre ce qui se passe avec vos données à différentes étapes.

Forms

Notez qu'après avoir sélectionné un utilisateur, selectedUser sera ajouté instantanément. En outre, vous allez voir deux entrées ajoutées au composant UsersComponent :

Si nous sélectionnons l'un d'entre eux les intrants, nous allons voir des informations assez détaillées sur ce contrôle - en particulier, quel modèle il concerne aussi. Si je change la valeur de l'entrée, le modèle sera également mis à jour:

Injection de dépendances

Comme vous vous en souvenez, nous avons le UserService injecté dans le UsersComponent n'est-ce pas? Cela peut être facilement confirmé en sélectionnant UsersComponent et en ouvrant un " Injector Graph ":

Donc, nous pouvons voir ici Hiérarchie des composants et le graphique de l'injecteur lui-même. Ce graphique illustre l'arbre de dépendance:

• root est notre NgModule défini dans le fichier app.module.ts
• Ensuite, il y a un ] AppComponent
• Enfin, il y a le UsersComponent lui-même.

Notez également que le UserService est connecté au composant UsersComponent avec une ligne rouge. Cela confirme que le service est définitivement injecté dans le composant. Vous pouvez également passer le pointeur de la souris sur le nœud UserService pour afficher des informations plus détaillées au bas de l'onglet:

L'injection de dépendances peut vous aider à vous assurer que toutes les dépendances sont connectées correctement, car de nombreux bogues surviennent simplement parce que vous oubliez d'importer un module.

NgModules

Il est également possible d'afficher une liste complète des modules utilisés dans l'application ainsi que des informations sur les fournisseurs, les exportations et d'autres choses. C'est aussi simple que d'ouvrir l'onglet NgModules :

Malheureusement, cet onglet n'est pas interactif, vous ne pouvez donc pas sélectionner un module pour voir plus informations détaillées à ce sujet.

Routes

La dernière fonctionnalité Augury est la possibilité de inspecter le système de routage de votre application. Nous n'avons pas d'itinéraires dans l'application de démonstration, mais voici une image tirée de la documentation officielle qui illustre bien cette fonctionnalité:

On peut voir toutes les routes de l'application avec facilité. Même si un itinéraire est chargé paresseux, ce schéma sera automatiquement mis à jour lorsque l'itinéraire correspondant apparaît.

Conclusion

Dans cet article, nous avons examiné le profileur Augury et le débogueur pour les applications Angular 2+. Nous avons vu comment installer et lancer cet outil et discuter de toutes ses fonctionnalités principales, y compris l'arbre des composants, le graphe d'injection, les points d'arrêt et le débogage de routage.

Comme vous le voyez, cet outil est très simple. certainement quelque chose que chaque développeur Angular devrait avoir dans sa boîte à outils! Quels débogueurs avez-vous essayé d'utiliser lors du développement pour le client? Avez-vous aimé les fonctionnalités d'Augury? Comme toujours, je vous remercie de rester avec moi et de déboguer heureux.

Ilya Bodrov est personnel Professeur d'informatique, ingénieur senior travaillant chez Campaigner LLC, auteur et assistant d'enseignement chez Sitepoint et conférencier à l'Institut Aviations de Moscou. Ses principaux langages de programmation sont Ruby (avec Rails) et JavaScript. Il aime coder, enseigner aux gens et apprendre de nouvelles choses. Ilya possède également des certificats Cisco et Microsoft et travaillait comme tuteur dans un centre éducatif pendant quelques années. Pendant son temps libre, il tweete, écrit des posts pour son site participe à des projets OpenSource, fait du sport et joue de la musique.