So debuggen Sie AngularJS-Anwendungen mit dem Chrome-Browser_AngularJS

Wenn wir AngularJS-Anwendungen erstellen, ist es immer etwas schwierig, über die JavaScript-Konsole von Browsern wie Chrome, Firefox und IE auf versteckte Daten und Dienste in der Anwendung zuzugreifen. Hier sind einige einfache Techniken, die uns helfen können, laufende Angular-Anwendungen über die Javascript-Konsole anzuzeigen oder zu steuern, wodurch es einfacher wird, unsere Angular-Anwendungen in Echtzeit zu testen, zu ändern und sogar zu modifizieren:
1: Zugriffsbereich

Greifen Sie mit einer einfachen JS-Zeile auf jeden Bereich auf der Seite zu (auch isolierte Bereiche!):

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

Für den Isolationsbereich:

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

Verwenden Sie hier „targetNode“ als Referenz auf den HTML-Knoten. Sie können ganz einfach einen „targetNode“ über „document.querySelector()“

erstellen

2: Bereichsbaum anzeigen

Manchmal müssen wir die Bereichshierarchie auf der Seite anzeigen, um unsere Anwendung effektiv debuggen zu können. AngularJS Batarang ist genau das, was wir brauchen, eine Chrome-Browsererweiterung, die die aktuelle Bereichshierarchie anzeigen kann und über andere sehr nützliche Funktionen verfügt.

3: Nehmen Sie einen beliebigen Service in Anspruch

Unabhängig davon, wo ngApp definiert ist, können wir die Injector-Funktion verwenden, um einen Verweis auf einen beliebigen Dienst abzurufen (wenn Sie die Bootstrap-Methode von Angular verwenden, können Sie $rootElement manuell abrufen):

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

Wir können dann Anrufe an den Dienst tätigen, genau wie wir den Dienst injizieren können.

4: Anweisungen zur Verwendung des Zugriffscontrollers

Einige Anweisungen definieren einen Controller mit einigen zusätzlichen (normalerweise gemeinsamen) Funktionen. Um von der Konsole aus auf eine Controller-Instanz für eine bestimmte Direktive zuzugreifen, verwenden Sie einfach die Methode controller():

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

Der letzte Ansatz ist fortgeschrittener und wird weniger häufig verwendet.
5: Funktionen der Chrome-Konsole

Die Chrome-Konsole verfügt über eine Reihe toller Verknüpfungen zum Debuggen von Browser-Apps. Hier sind einige der Best Practices in der Angular-Entwicklung:

• $0-$4: Greifen Sie auf die 5 zuletzt im Anzeigefenster ausgewählten DOM-Elemente zu. Es ist sehr praktisch, den Crawling-Bereich auszuwählen.
• $(selector) und $$(selector): Eine schnelle Alternative zu querySelector() bzw. querySelectorAll

Danke @zgohr für die Bereitstellung dieser Methode!

Fazit

Mit ein paar einfachen Tricks können wir in jedem Bereich der Seite auf Daten zugreifen, die Bereichshierarchie anzeigen, Dienste und Steueranweisungen einfügen.

Wenn Sie also das nächste Mal ein wenig optimieren, Ihre eigene Arbeit überprüfen oder eine AngularJS-Anwendung über die Konsole steuern möchten, hoffe ich, dass Sie sich diese Befehle merken und sie genauso nützlich finden wie ich!