Web Debugging und Profiling mit Glimpse
Glimpse ist ein Open Source Projekt, welches das Debugging und Profiling von Web-Anwendungen, in unserer Umgebung ASP.NET, ermöglicht. In Ergänzung zu unseren bestehenden Tools wie den IE Developer Tools, Firebug oder YSlow zusätzlich auch server-seitig – was einen umfassenden Einblick in die Gesamtleistung und potentielle Engpässe ermöglicht.
Eine kurze Übersicht von Glimpse für ASP.NET vermittelt dieser Blog-Beitrag.
Wir haben Glimpse in unser CMS-Framework i4Portal integriert, welches wir für Website-Projekte verwenden, bei denen Standard-Frameworks wie WordPress oder Typo3 dem Anforderungsprofil nicht genügen (ja, also eigentlich für alle ; ).
Sobald Glimpse implementiert und aktiviert ist wird ein HUD (head-up-display) in der rechten unteren Browser-Ecke eingeblendet:
Die Übersicht zeigt die Zeitdauer an aufgeteilt nach Wire, Server und Client (Bemerkung: der Screenshot zeigt eine Intranet-Anwendung, deshalb die kurze ‹Wire› Response Time. Die relative lange ‹Server›-Response-Time stammt von einer Abfrage der Outlook-Kalenderdaten von mehreren Personen für den Zeitraum von 30 Tagen: für diesen Einsatz ein akzeptables Timing-Verhalten):
In der Detailansicht «Timeline», als Anschauungsbeispiel, sind die einzelnen Connections zu sehen, eine für uns sehr wertvolle Information, da die Datenbank-Zugriffe in der Regel einen grossen Anteil an der Gesamt-Performance einer Intranet- oder Extranet-Anwendung besitzen:
Weitere Detailansichten und -Informationen aus dem Glimpse-HUD:
- Configuration
- Environment
- Request
- Routes:
- SQL
- Server
- Session
- Timeline
- Trace
Alles in allem ein umfassender Einblick in Aufbau, Prozesse und Leistungsverhalten einer Web-Anwendung. In der Praxis ergibt dies ein umfassendes Profiling, welches die am häufigsten anzutreffenden Ursachen für schwache Performance schnell identifiziert:
- Sub-optimaler Web-Architektur und Seiten-Aufbau, unnötige HTTP-Requests (Server, Client)
- mangelhaftes Datenbank-Design, fehlende Indizierung, nicht optimierte SQL-Queries (Server)
- bei CMS-Funktionalität: unnötig grosse Bilder, nicht web-optimierte Inhalte (Wire, Client)
Installation und Konfiguration von Glimpse mit Visual Studio
Wir benötigen für unsere Web-Entwicklungsumgebung (Visual Studio, ASP.NET, ADO) die folgenden Packages:
- Glimpse Core
- Glimpse ASP.NET
- Glimpse ADO
Die Installation gestaltet sich dank dem NuGet Package Manager in Visual Studio recht einfach:
Nach der Installation mussten wir in unserem CMS-Framework die Datenbank-Bibliothek von der MS SQL spezischen SQL-Provider auf die in Glimpse ADO unterstützte generische DbProviderFactory umstellen. Ein Aufwand welcher sich lohnt, da anschliessend alle SQL commands, in unserem Fall Stored Procedures, ebenfalls inclusive Timing dargestellt werden.
Fazit
Jeder ernsthafte Web-Architekt und -Entwickler sollte ein Tool wie Glimpse in seinem Werkzeugkasten haben. Mit den Erkenntnissen aus dem praktischen HUD können potentielle Leistungsengpässe bezüglich Bandbreite, Server- und Client-seitigen Prozessen sowie Inhalten rasch detektiert und damit auch behoben werden.
