JavaScript: Angular DevTools für Chrome verfügbar
Das Entwicklerteam hinter dem JavaScript-Framework hat in Zusammenarbeit mit den Augury-Machern die DevTools für Angular entwickelt.
(Bild: monticello / Shutterstock.com)
Das Angular-Entwicklerteam hat die Angluar DevTools vorgestellt. Es handelt sich dabei um eine DevTools-Erweiterung für den Browser Chrome, mit der Entwicklerinnen und Entwickler die Struktur ihrer Anwendungen untersuchen und im Anschluss ein Performance-Profil erstellen können.
Change Detection und Komponentenstruktur
Basierend auf den Ergebnissen interner und externer Untersuchungen, hat das Entwicklerteam hinter Angular nach eigenen Angaben vier Bereiche identifiziert, auf die sich die Angular DevTools künftig konzentrieren sollen. Neben Verbesserungen bei Fehlermeldungen, dem Verständnis für die Ausführung einer Change Detection und der Injektor-Hierarchie sowie der Provider-Instanziierung liegt der Fokus auf der Visualisierung der Komponentenstruktur. Vorerst steht die Struktur der Komponenten sowie Change Detection im Fokus. Letzteres ist als Funktion zu verstehen, die prüft und erkennt, ob sich Eingabewerte einer Komponente geändert haben.
Neu eingeführte APIs für das globale ng-Objekt sollen das Debugging erleichtern. Darüber hinaus hat das Entwicklerteam die Fehlermeldungen in Angular angepasst: Entwicklerinnen und Entwickler erhalten mehr Informationen sowie eine Anleitung zur Fehlerbehebung. Für ein besseres Verständnis, wie sich Anwendungen profilieren lassen, liefern die Angular DevTools weitere Inhalte zur Profilerstellung mit Chrome DevTools.
Zusammenarbeit mit Augury-Entwicklern
Die Angular DevTools wurden in Zusammenarbeit mit Rangle.io entwickelt, einem Team, dass offenbar mit Augury das erste Debugging-Tool für das JavaScript-Framework entwickelt hat. In Anlehnung an Augury halten die Angular DevTools einen Komponenten-Explorer bereit, der eine Vorschau auf die Struktur ihrer Anwendungen bietet. Daran lassen sich auch die Zyklen der Change Detection ablesen, was dabei helfen soll, Performance-Engpässe zu erkennen.
(Bild: Angular)
Die Angular DevTools benötigen Angluar 9 oder jüngere Versionen, die den Compiler Ivy aktiviert haben. Vor wenigen Tagen ist Angular 12 erschienen. Nähere Informationen zu den Angular DevTools finden sich im Beitrag auf dem Angular-Blog. Die DevTools lassen sich kostelnlos über den Chrome Web Store installieren.
(mdo)
