Depuis la release Angular 9 en 2020, nous avons accès à l'objet global 'ng' dans la console du navigateur, et cela rend le débuggage extrêmement facile. Je partage dans ce post quelques fonctionnalités que j'utilise souvent.


C'est quoi ‘ng’?

L'objet ‘ng’ est l'instance globale Angular. Si vous tapez ‘ng’ dans votre console de navigateur en faisant tourner un projet Angular, vous verrez quelque chose comme ça :

  


ng.getComponent(elt)

Retrouve et affiche l'instance du composant Angular depuis un élément HTML. J'utilise très souvent cette méthode pour vérifier l'état d'un composant (que valent les différentes propriétés, les @Input()...). Vous pouvez aussi l'utiliser sur des composants venant de librairies externes, ce qui peut être extrêmement utile (ex: highcharts, ag-grid...).


Comment l'utiliser ?

Allez dans l'onglet 'Elements' dans la console de votre navigateur, et sélectionnez le node correspondant au composant que vous souhaitez vérifier.


Allez ensuite dans l'onglet 'Console' et saisissez : 

ng.getComponent($0)


Que signifie ‘$0’ ? 

$0 est l'élément sélectionné le plus récemment dans l'inspecteur d'élements.


Vous obtiendrez ainsi la liste de toutes les propriétés et méthodes de ce composant à cet instant.


Vous pouvez explorer les autres méthodes disponibles de l'objet 'ng' en répétant le même processus. Petit zoom sur quelques unes que je trouve particulièrement intéressantes :


  • ng.getOwningComponent(elt): Trouve le composant parent du node sélectionné. Cela fonctionne donc comme "ng.getComponent", sans avoir à sélectionner le node exact dans le DOM.


  • ng.getDirectives(elt): Trouve le tableau de directives appliquées à un élément HTML.


  • ng.getListeners(elt): Trouve le tableau d'event listeners HTML et host listeners de l'élément HTML sélectionné. Cela permet de déclencher des événements sans exécuter manuellement l'action.


Conclusion

Si vous ne connaissiez pas cette fonctionnalité, vous devriez désormais mieux appréhender la facilité de débugger vos applications Angular depuis votre console de navigateur.