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!