Conseils pour déboguer vos applications angulaires

Nous allons examiner quelques méthodes et outils uniques qui peuvent être utiles pour le débogage d’applications angulaires.

Le débogage est une compétence importante pour les développeurs. C'est aussi important que la programmation elle-même. La programmation est une compétence apprise – il en va de même pour le débogage.

Si le débogage est le processus de suppression des bogues logiciels, la programmation doit être le processus de leur insertion. – W. Dijkstra

Il est difficile de développer un programme totalement exempt d’erreurs. C'est pourquoi il est important d'utiliser des outils et des techniques pour étoffer les bogues intégrés à votre base de code.

Le framework Angular utilise certaines des techniques de débogage populaires, ainsi que des outils et techniques uniques pour le débogage de ses applications. Nous examinerons quelques méthodes et outils pouvant être utiles pour le débogage d’applications angulaires.

Augury

Augury est une extension pour Chrome et Firefox DevTools qui peut être utilisée pour visualiser, déboguer et profiler des applications angulaires. Augury permet d'afficher l'arborescence des composants des applications angulaires, de visualiser l'état actuel des composants et de voir comment les composants réagissent aux changements d'état.

Augury peut également être utilisé pour afficher la source de chaque composant en cliquant sur le lien pour afficher la source en regard de chaque composant.

Lorsque le lien est affiché Cliquez sur le bouton la source du composant s'affiche, indiquant les méthodes, l'état et les données liées au composant.

La hiérarchie du composant et les dépendances de ce dernier peuvent être visualisées dans l'onglet Injecteur .

Débogueur

L'utilisation de l'instruction du débogueur dans n'importe quelle zone de votre base de code entraînera la rupture de l'application au point où elle est définie. Ceci est utile pour afficher la pile d'appels en cours de votre application avant la définition du point d'arrêt.

Par exemple, si nous devons voir les données transmises à une fonction, nous plaçons l'instruction debugger [pointd'entréedelafonction:

 addToCart  ( item )   {
     du débogueur ; 
     du .  du magasin .  dispatch  ( new   AddToCart  ( élément ) ) ; 
     ceci . .  inCart  ] =   true ; 
 } 

Vous pouvez ensuite afficher les données envoyées lors de chaque appel de fonction.

. le mot-clé dans l'outil de développement Chrome, vous pouvez afficher les valeurs actuelles au moment où le point d'arrêt est déclenché. Ceci est très utile lors du débogage, car vous pouvez voir quels paramètres sont transmis à une fonction ou renvoyés d'une fonction sans les consigner.

ng probe

Il s'agit d'une commande DevTools utile pour afficher l'état actuel de tout composant. dans l'arborescence des composants. Pour utiliser la commande, visitez le site DevTools. Dans l'onglet Inspector sélectionnez un élément angulaire, accédez à l'onglet Console et exécutez la commande suivante:

  ng.probe  ( $ 0 )  .componentInstance

La fonction ng.probe prend un seul paramètre: 0 $ ; Il s'agit d'un raccourci DevTools permettant d'afficher le dernier élément sélectionné dans l'onglet Inspecteur. Les autres paramètres pouvant être passés à ng.probe sont: 1 $ 2 $ 3 $ 4 $ chacun signifiant les quatre derniers éléments sélectionnés dans l'onglet Inspecteur.

Vous pouvez afficher d'autres informations sur le composant, telles que les écouteurs attachés à l'élément, l'élément parent et les attributs de l'élément à l'aide du bouton . .probe ($ 0) call.

Éditeurs

Le débogage à l'aide de DevTools est excellent, mais rien ne vaut le confort de ne jamais quitter son éditeur / IDE. Les éditeurs et les IDE tels que VS Code et WebStorm peuvent être configurés pour déboguer des applications angulaires. Pour commencer à utiliser VS Code, la première étape consiste à installer l'extension Debugger for Chrome . Vous pouvez rechercher dans l’onglet des extensions et il apparaîtra:

Si l’extension n’a pas déjà été installée, vous devriez voir un bouton d’installation là où se trouve le bouton de désinstallation. Une fois l'installation terminée, rechargez la fenêtre de l'éditeur.

L'étape suivante consiste à configurer le script de lancement: launch.json . VS Code a plusieurs préréglages, vous n’avez donc pas à vous soucier d’écrire à partir de rien. Accédez à l'onglet de débogage sur la barre latérale, celui avec l'icône de bogue. Dans l'onglet de débogage, cliquez sur l'icône représentant une roue dentée et sélectionnez le préréglage chrome . Cela générera un script de lancement et il vous suffira d'éditer la propriété url pour l'adapter au port d'exécution de votre application.

Votre script de lancement final doit ressembler à la capture d'écran ci-dessous.

Vous devez maintenant définir des points d'arrêt dans l'ensemble de votre base de code et les points d'arrêt seront observés dans Chrome.

Les points d'arrêt sont déclenchés lorsqu'un élément est ajouté. au panier. Lorsque cela se produit, le focus de la fenêtre sera déplacé vers votre éditeur et vous pourrez inspecter les valeurs directement depuis votre éditeur.

Vous pouvez également utiliser la console de débogage de l'éditeur comme vous le feriez. dans la console de DevTools.

Tap

Le débogage des éléments observables est délibérément délicat: vous ne savez jamais quelle valeur sera transmise, en particulier pour les opérateurs de canalisation. Eh bien, RxJS a introduit l'opérateur tap précédemment nommé do (renommé en raison de conflits de noms avec le mot clé JavaScript). Il peut être placé entre les opérateurs raccordés pour effectuer des effets secondaires tels que la journalisation des valeurs transmises via ce dernier.

     import   {  de  }   de   'rxjs' ; 
     import   { tap  carte }   de   de [rxjs/operators'; 
    
     const  de  evens . ] =   de  ( 2   4   6   8 ) ; 
    .  divisor  =  evens .  tuyau  (
       robinet  robinet  val  =>  console . 19659022] log  ( `BEFORE MAP:  $ { val } `  ) ) 
       carte  ( val  =>  val  /   2 ) 
       tap  ( val  =>  console .  log  ( `APRES LA CARTE:  $ { val } `  ) ) 
    ) ; 

Lorsque la valeur du diviseur est exécutée de manière asynchrone, la valeur actuelle et les valeurs transformées sont consignées. tap ne transforme pas les valeurs – cela est fait par l’opérateur de la carte ; tap enregistre simplement les valeurs.

     BEFORE MAP: 2
    APRÈS LA CARTE: 1
    AVANT CARTE: 4
    APRÈS LA CARTE: 2
    AVANT CARTE: 6
    APRÈS LA CARTE: 3
    AVANT CARTE: 8
    APRÈS LA CARTE: 4

Profileur

Angular comporte un profileur intégré qui enregistre le temps nécessaire à la détection des modifications dans l'application. Il enregistre le nombre de cycles de détection des modifications exécutés dans l'application et le temps pris pour chaque contrôle. Pour activer le profileur, vous devez activer les outils de débogage dans votre application Angular. Mettez à jour votre fichier main.ts pour qu'il soit similaire à l'extrait ci-dessous:

     import   { enableProdMode  ApplicationRef }   à partir de  . ] '@ angular / core' ; 
     import   { platformBrowserDynamic }   de   '@ angular / platform-browser-dynamic' ; 
     ] import   { AppModule }   de   './ app / app.module' ; 
     import   { environnement }   de   './ environnements / environment' ; 
     import   { enableDebugTools }   de   '@ angular / platform-browser' [19659016]; 
     if   ( environnement .  production )   {
       enableProdMode  () ; [196590105] } 
     platformBrowserDynamic  () .  bootstrapModule  ] ( AppModule ) .  puis  ( module   =>   {
       soit  applicationRef  =   module .  injecteur .  get  ( ApplicationRef ) ; 
       let  appComponent  =  applicationRef [Composants [ 0 ] ; 
       enableDebugTools  ( appComponent ) ; 

; ) 
      .  catch  ( err  =>  console .  erreur  ( err ) ) ; 

Après avoir effectué ce changement, vous pouvez exécuter la commande suivante dans votre console DevTools:

  ng.profiler.timeChangeDetection  () 

Vous devriez voir des journaux similaires. à la capture d'écran ci-dessous:

Le temps pris pour chaque ch La demande ci-dessus est 0.07 ms . Toute application saine devrait être n'importe où entre à 3.00 ms . Vous pouvez également enregistrer le profil actuel en passant des options à la méthode timeChangeDetection . Exécutez la commande suivante dans la console:

  ng.profiler.timeChangeDetection  ( { enregistrement: true } ) 

Vous remarquerez que les journaux ont été mis à jour. pour inclure start et finish logs:

Vous pouvez ensuite afficher le profil enregistré dans l'onglet de profileur JavaScript de l'outil de développement. Il est probablement caché et peut être trouvé lorsque vous cliquez sur l'icône représentant des points de suspension et survolez avec d'autres outils . Dans l'onglet du profileur, vous pouvez afficher avec précision les zones dans lesquelles la détection de modification a été exécutée et sa durée.

Vous pouvez également sélectionner une vue de graphique dans l'onglet du profileur.

Débogage de la console [19659007] Vous ne pouvez pas compléter la liste sans mentionner l'une des techniques de débogage les plus efficaces, la journalisation des objets sur la console. Il est couramment utilisé dans les environnements de développement pour visualiser les données circulant dans l'application. Il existe différentes méthodes de publication des données sur la console. Les méthodes les plus couramment utilisées sont console.log console.warn et console.error .

. Vous pouvez facilement publier des données sur la console lorsque des événements sont déclenchés en les enregistrant à l'aide de l'une des méthodes de la console:

      addToCart  ( élément :  Produit ).   {
        console .  log  ( item ) ; 
         ceci .  magasin .  dépêche  ([19659024] new   AddToCart  ( item ) ) ; 
         ce .  inCart  =   =   vrai . ; 
      } 

Lorsqu'un élément est ajouté au panier, l'élément est enregistré dans la console.

Vous pouvez également enregistrer les erreurs de votre application sur la console. pour les suivre en utilisant console.error .

     addToCart  ( item :  Produit )   {
         try [19659017] {
          console .  log  ( item ) ; 
           ce .  magasin .  dépêche  ([19659024] new   AddToCart  ( item ) ) ; 
           ce .  inCart  =   =   vrai  ; 
           lancer   nouveau   Erreur  ( "une erreur est survenue" ) ; 
        }   capture   ( e [19659016])   {
          console .  error  ( e ) ; 
        } 
      } 

Quand cette erreur se produit, vous verrez le message affiché sur votre ordinateur. console en texte rouge.

Vous pouvez également filtrer les niveaux de console pour n’afficher que les erreurs ou les journaux, etc. Il est utile pour désencombrer la console lors de la recherche de données journalisées sur la console à l’aide d’une méthode particulière. 19659005]

Vous pouvez en savoir plus sur les méthodes de la console ici .

Conclusion

Vous ne pouvez pas échapper aux bogues, quelle que soit la vitesse à laquelle vous courez ou, dans ce cas, comment Si votre base de code est bonne, il est donc essentiel de choisir une technique de débogage qui fonctionne pour vous. Plusieurs techniques et outils de débogage peuvent être combinés pour rendre le débogage plus facile et toutes les techniques répertoriées ci-dessus peuvent être combinées pour déboguer efficacement. Allez les chercher.