Verwenden Sie Angular Augury, um Ihren Code zu debuggen

Augury: Ein leistungsstarkes Debugging -Tool für Winkelanwendungen

Augury ist ein Open -Source -Tool, das zum Debuggen und Analysieren von Angular 2 -Anwendungen entwickelt wurde. Es präsentiert die Anwendungsarchitektur intuitiv eine Baumstruktur, sodass Entwickler die Objekteigenschaften problemlos überprüfen, in Echtzeit ändern, Quellcode anzeigen, Breakpoints festlegen, Ereignisse handeln usw.

Augurys Kernvorteile:

• Open Source und einfach zu bedienen:
Als Chrome-Browser-Erweiterung ist Augury einfach zu installieren und erfordert kein zeitaufwändiges Lernen.
• Intuitive Visualisierung:
Komponenten und ihre Abhängigkeiten in einer Baumstruktur zeigen, um das Verständnis der Anwendungsarchitektur zu erleichtern.
• Echtzeit-Debugging:
Ermöglicht die Echtzeitüberprüfung und -änderung von Objekteigenschaften in Echtzeit und beobachten Sie sofort die Änderungen.
• Mächtige Debugging -Funktionen:
unterstützt erweiterte Debugging -Funktionen wie das Anzeigen von Quellcode, das Einstellen von Haltepunkten und die Bearbeitung von Ereignissen.
• Abhängigkeitsinjektionsdiagramm:
Zeigen Sie die Abhängigkeiten zwischen Komponenten eindeutig an, um Probleme mit der Fehlerbehebung zu erleichtern.
• Routing-System-Visualisierung:
intuitiv die Routing-Struktur der Anwendung anzeigen, die für das Debuggen von Routing-Problemen geeignet ist.

Augury Benutzerhandbuch:

1. Installation von Augury:
Installieren Sie die Augury -Erweiterung im Chrome -Webladen.
2. Starten Sie die Entwickler -Tools: Ctrl drücken Sie Shift I Cmd (Windows/Linux) oder Option I
(macOS), um die Entwickler -Tools zu öffnen.
3. Um die Registerkarte "Augury" in den Entwickler -Tools zu finden und auf die Registerkarte "Augury" zu wechseln.
4. Durchsuchen Sie den Komponentenbaum: Wählen Sie die Zielkomponente im Komponentenbaum aus, und das rechte Feld zeigt die Eigenschaften, Abhängigkeiten und andere Informationen der Komponente an.
5. Setzen Sie Breakpoints: Setzen Sie die Haltepunkte im Quellcode -Bereich, um eine Pause einzulegen, wenn das Programm an einen bestimmten Speicherort für ein tieferes Debuggen ausgeführt wird.
6. Abhängigkeitsinjektion überprüfen: Verwenden Sie die Funktion "Injektorgrafik", um die Abhängigkeitsinjektionsbeziehung der Komponente zu überprüfen.
7. Ansicht von Routen: Verwenden Sie die Funktion "Routen", um die Routing -Konfiguration der Anwendung anzuzeigen.

Beispielanwendung:

Um die Funktionen von Augury besser zu verstehen, wird in dem Artikel eine einfache Winkelanwendung eingebaut, um die verschiedenen Funktionen von Augury zu demonstrieren. Die App listet einige Benutzer auf und ermöglicht Benutzern die Bearbeitung von Benutzerinformationen.

Augurys Hauptfunktionsmodule:

• Komponentenansicht (Komponentenansicht): Zeigt die Komponentenbaum an, sodass Sie die Eigenschaften der Komponenten überprüfen und ändern können, Quellcode anzeigen und Breakpoints festlegen können.
• Formulare: bietet detaillierte Inspektion und Echtzeitveränderung der Formularkontrollen.
• Abhängigkeitsinjektion: intuitiv die Abhängigkeitsinjektionsbeziehung durch "Injektordiagramm" anzeigen.
• ngmodules: Zeigt alle Module und deren Informationen an, die in der Anwendung verwendet werden.
• Routen: Zeigt die Routing-Konfiguration der Anwendung an, um die Debugging-Routing-Probleme zu erleichtern.

Zusammenfassung:

Augury ist ein einfaches und leistungsstarkes Debugging -Tool für Winkelanwendungen, das die Debugging -Effizienz von Winkelentwicklern erheblich verbessern kann. Die intuitive Oberfläche und die reichen Merkmale machen es zu einem der Must-Have-Werkzeuge für jeden Winkelentwickler.

FAQs:

Dieser Artikel enthält auch häufig gestellte Fragen zu Augury, die die Installation, Verwendung, Funktionen und Vergleiche mit anderen Debugging -Tools abdecken.

Durch die oben genannten Verbesserungen ist der Inhalt des Artikels prägnanter und klarer geworden, und die Schlüsselinformationen werden hervorgehoben, während der Kerninhalt und die Bilder des Originaltextes beibehalten wird.

Das obige ist der detaillierte Inhalt vonVerwenden Sie Angular Augury, um Ihren Code zu debuggen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!