Comment déboguer des applications AngularJS à l'aide du navigateur Chrome_AngularJS

Lorsque nous construisons des applications AngularJS, il est toujours un peu difficile d'accéder aux données et services cachés dans l'application via la console JavaScript des navigateurs tels que Chrome, Firefox et IE. Voici quelques techniques simples qui peuvent nous aider à visualiser ou à contrôler les applications Angular en cours d'exécution via la console Javascript, facilitant ainsi le test, la modification et même la modification de nos applications Angular en temps réel :
1 : Portée d'accès

Accédez à n'importe quel scope de la page (même les scopes isolés !) avec une simple ligne de JS :

> angular.element(targetNode).scope()
-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

Pour la portée de l'isolement :

> angular.element(targetNode).isolateScope()
-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

Utilisez `targetNode` ici comme référence au nœud HTML. Vous pouvez facilement créer un `targetNode` via `document.querySelector()`

2 : Afficher l'arborescence de la portée

Parfois, nous devons afficher la hiérarchie des portées dans la page pour déboguer efficacement notre application. AngularJS Batarang est exactement ce dont nous avons besoin, une extension de navigateur Chrome qui peut afficher la hiérarchie actuelle des portées et possède d'autres fonctionnalités très utiles.

3 : Saisissez n'importe quel service

Peu importe où ngApp est défini, nous pouvons utiliser la fonction d'injection pour récupérer une référence à n'importe quel service (si vous utilisez la méthode bootstrap d'angular, vous pouvez récupérer manuellement $rootElement) :

> angular.element('html').injector().get('MyService')
-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

On peut alors passer des appels au service, tout comme on peut injecter le service.

4 : Instructions d'utilisation du contrôleur d'accès

Certaines directives définissent un contrôleur avec des fonctionnalités supplémentaires (généralement de partage). Pour accéder à une instance de contrôleur pour une directive donnée depuis la console, utilisez simplement la méthode controller() :

> angular.element('my-pages').controller()
-> Constructor {}

La dernière approche est plus avancée et moins couramment utilisée.
5 : fonctionnalités de la console Chrome

La console Chrome propose de nombreux raccourcis intéressants pour déboguer les applications du navigateur. Voici quelques-unes des meilleures pratiques en matière de développement angulaire :

• $0-$4 : Accédez aux 5 éléments DOM récemment sélectionnés dans la fenêtre de visualisation. Il est très pratique de choisir l’étendue de l’exploration.
• $(selector) et $$(selector) : une alternative rapide à querySelector() et querySelectorAll respectivement

Merci @zgohr d'avoir fourni cette méthode !

Conclusion

Avec quelques astuces simples, nous pouvons accéder aux données dans n'importe quelle portée de la page, afficher la hiérarchie des portées, injecter des services et contrôler les instructions.

Alors la prochaine fois, si vous souhaitez peaufiner un peu, vérifier votre propre travail ou contrôler une application AngularJS via la console, j'espère que vous pourrez vous souvenir de ces commandes et les trouver aussi utiles que moi !