Angular-Debugging-PluginAngularJS Batarang

Heutzutage ist das beliebte MVVM-Framework bei der Front-End-Entwicklung definitiv unvermeidlich. Hier sind also drei beliebte Framework-Devtools, falls Sie sie selbst besorgen müssen. Vue.js devtools, AngularJS BatarangReact, Entwicklertools. In diesem Artikel wird hauptsächlich AngularJS Batarang vorgestellt

So verwenden Sie das AngularJS Batarang-Plug-In

1. Die Offline-Installationsmethode für das AngularJS Batarang-Plug-In finden Sie in der folgenden Methode : Öffnen Sie bei älteren Versionen von Chrome-Browsern zunächst die Registerkarte „Geben Sie [chrome://extensions/]“ auf der Seite ein, um die Chrome-Erweiterungen einzugeben, entpacken Sie das von dieser Website heruntergeladene Plug-in und ziehen Sie es auf die Erweiterungsseite.

2. Wenn die neueste Version des Chrome-Browsers direkt per Drag-and-Drop zur Installation gezogen wird, wird „Ungültiges Paket“ angezeigt Bei der Installation des Chrome-Plugins wird die Fehlermeldung „CRX“ -HEADER-INVALID“ angezeigt. Weitere Informationen finden Sie in Baidu.

3. Nach Abschluss der Installation erscheint das Symbol in der Plug-in-Leiste.

4. Öffnen Sie eine Angular-Anwendung im Chrome-Browser und öffnen Sie die Konsole, wie unten gezeigt, Sie werden feststellen, dass es noch mehr gibt Aktivieren Sie auf einer AngularJS-Seite „Aktivieren“ und das Steuerelement kann verwendet werden.

5. Klicken Sie auf „Modelle“, wie unten gezeigt, und auf der rechten Seite Auf der Seite finden Sie die zum Scope gehörenden Modellinformationen. Klicken Sie auf einen Bereich. Alle Modellinformationen im Bereich werden rechts angezeigt. Durch Klicken auf „<“ vor „Scope“ wird zum DOM-Tag gesprungen, in dem sich der Scope in Elements befindet.

6.Performace zeigt die Leistung der Anwendung an. Klicken Sie auf den Knoten des Baums um zum entsprechenden Element zu springen. Auf der rechten Seite wird die Leistung von Überwachungsausdrücken angezeigt. Diese Seite kann uns dabei helfen, die Leistung zu optimieren.

7.Abhängigkeiten zeigt die Abhängigkeiten zwischen Anweisungen und Diensten an. Wählen Sie eine Anweisung aus, um die Dienste anzuzeigen, von denen sie abhängt. Visualisieren Sie die Abhängigkeiten zwischen Diensten durch Diagramme.

8 Schließlich gibt es noch die Optionsseite. Es gibt drei Optionen: „Anwendungen anzeigen“, „Bereiche anzeigen“ und „Bindungen anzeigen“. Wenn jede Option aktiviert ist, wird der entsprechende Inhalt während des Debuggers auf der Seite hervorgehoben.

9. Wenn Sie Fragen haben, schauen Sie bitte in die Hilfe

10 Element Wenn im Tag ein Tag ausgewählt wird, wird auf der rechten Seite der Elementseite eine AngularJS-Eigenschaftenseite angezeigt. Diese Seite zeigt die Eigenschaften des Bereichs des ausgewählten HTML-Inhalts an. Diese Funktion ist sehr nützlich, um Angular Scope zu verstehen. . Wenn Sie Angular Scope nicht sehr gut verstehen, können Sie diese Funktion häufiger verwenden.