Die benutzerdefinierte Angular-Leistungsspuraufzeichnung ist jetzt verfügbar

Die Angular- und Chrome-Teams haben zusammengearbeitet, um Angular-spezifische Daten und Erkenntnisse direkt in das Leistungs-Panel der Chrome-Entwickler-Tools zu integrieren, was eine einheitliche Profilerfahrung für Entwickler schafft. Diese Integration ermöglicht es Entwicklern, die Vorteile beider Tools zu kombinieren und bietet eine synchronisierte und umfassendere Ansicht der Leistung ihrer Anwendung. Die neue benutzerdefinierte Spur für Angular in Chrome-Entwickler-Tools bietet Leistungsdaten unter Verwendung von Angular-Konzepten wie Anwendungs-Bootstrap, Komponenten, UI-Synchronisation und Lebenszyklus-Hooks. Die benutzerdefinierte Spur gruppiert Funktionsaufrufe zusammen unter entsprechenden Komponenten und anderen Angular-Konzepten, damit Entwickler bis zu einzelnen Funktionen herunterzoomen können, um eine feinere Ansicht zu erhalten. Die Einträge in der Flammen-Diagramm sind farbcodiert, um Entwicklern zu helfen, schnell zu erkennen, was in ihrer Anwendung passiert, und zwischen Anwendungscode, anderen Skripten oder Browser-Aktivitäten zu unterscheiden. Die Farben repräsentieren verschiedene Aspekte der Anwendung, wie Abhängigkeits-Injektion-Dienste, von Angular kompilierte Vorlagen und Einstiegspunkte. Die benutzerdefinierte Spur ist interaktiv, so dass Entwickler auf einen Eintrag in der Flammen-Diagramm klicken können, um weitere detaillierte Informationen über einen bestimmten Eintrag zu erhalten. Um loszulegen, müssen Entwickler sicherstellen, dass sie die neueste Version von Angular und eine aktuelle Version von Chrome verwenden, ihre Angular-Anwendung im Entwickler-Modus ausführen und die benutzerdefinierte Spur durch Eingabe von ng.enableProfiling() in der Konsole aktivieren. Diese Integration demonstriert das laufende Engagement für die Verbesserung der Entwicklererfahrung innerhalb des Angular-Ökosystems, indem Entwicklern geholfen wird, schnellere, effizientere Anwendungen zu bauen.