Live Visual Tree, Diagnostic-Tools-Fenster und Co. - die neuen Debugging-Features von VS 2015

Visual Studio 2015: Debuggen von WPF/XAML-Anwendungen
Kommentare

Lange Zeit war es ruhig um Windows Presentation Foundation (WPF). Seit Anfang 2015 konnte der aufmerksame Entwickler jedoch eine vermehrt WPF-bezogene Aktivität seitens Microsoft feststellen. Visual Studio 2015 bringt einige Neuerungen im Bereich WPF-Debugging, die auch für andere XAML-basierte Anwendungen hilfreich sind.

Dieser Artikel erläutert die Features von Visual Studio 2015 im Bereich des Debuggings von XAML-Anwendungen und fokussiert im Besonderen WPF-Anwendungen. Der erste Teil geht auf allgemeine Debugging-Features von Visual Studio 2015 ein, während der zweite Teil die Tools Live Visual Tree und Live Property Explorer unter die Lupe nimmt. Mit dem Release Candidate (RC) von Visual Studio 2015 sind diese jedoch dem WPF-Entwickler vorbehalten. Die Erweiterung auf XAML-basierte Windows-Store-Apps ist für zukünftige Updates geplant.

Debugging in Visual Studio 2015

Die Liste der neuen Features in Visual Studio 2015 ist umfassend. Die Aufzählung zeigt einige Highlights, die im Folgenden detaillierter illustriert werden:

  • Das Exception Settings Debug Window
  • Lambda Expression Debugging im Watch Window
  • PerfTips
  • Das Diagnostic Tools Window

Das Exception Settings Debug Window

Ein wichtiges Tool für jede Debugging-Session ist das Exception Settings Window. Dieses lässt den Entwickler auswählen, für welche Exception-Typen der Debugger anhalten soll. Das Exception Settings Window wird in Visual Studio 2015 über den Menüpunkt Debug | Exception Settings geöffnet. Damit ist es möglich, Exceptions durch einen einfachen Mausklick ein- oder auszuschalten. Im Gegensatz zu vorhergehenden Versionen bleibt das Exception Window während der Debugging-Session sichtbar und muss nicht über das Menü geöffnet werden.

Hinweis: Exceptions-Dialog

Den aus bisherigen Visual-Studio-Versionen bekannten, unter dem Menüpunkt DEBUG | EXCEPTIONS… enthaltenen modalen Exceptions-Dialog gibt es in Visual Studio 2015 nicht mehr. Er wurde mit dem Exception Settings Debug Window ersetzt, das die gleiche Funktionalität enthält.

Gegenüber dem alten, modalen Exceptions-Dialog hat das neue Fenster den Vorteil, dass die Funktionalität dort ist, wo sie ein Entwickler erwartet – integriert in die IDE in einem Tool-Window. Somit genügt ein einfacher Mausklick zum Ein- und Ausschalten von Exceptions während einer Debug-Session. Der umständliche Weg über einen modalen Dialog entfällt.

Lambda Expression Debugging im Watch Window

Eine weitere Neuerung ist die Möglichkeit, während dem Debugging eine Lambda-Expression auswerten zu können. Besonders im Zusammenhang mit Language Integrated Query (LINQ) ist dies oftmals hilfreich. Abbildung 1 zeigt ein Beispiel mit einer Liste, die die letzten Ausgaben des Windows Developers enthält. In Visual Studio 2015 können Lambda Expressions direkt im Watch Window evaluiert werden.

Abb. 1: Lambda Expression Debugging im Watch Window

Abb. 1: Lambda Expression Debugging im Watch Window

PerfTips

Zu den neuen Features zählen auch die PerfTips. Analog zu den Debugger Data Tips, die während dem Debugging die Werte von Variablen beim Mouseover anzeigen, erscheinen die PerfTips während einer Debugging-Session. Ein PerfTip zeigt die Zeit an, die verstrichen ist, seit der Debugger das letzte Mal angehalten wurde. Im Beispiel (Abb. 2) wurde mit Step-Over (F10) von der Methode ParseConfiguration() auf die Methode LoadData() gesprungen. Der PerfTip-Link zeigt an, dass die Ausführung von ParseConfiguration() ca. 3 018 Millisekunden gedauert hat.

Abb. 2: PerfTips

Abb. 2: PerfTips

Das Diagnostic Tools Window

Das Diagnostic Tools Window ist ein Debugging-Window, das die Funktionalität aus dem Performance und Diagnostics Hub während der Debugging-Session live anzeigt. Es besteht aus einer Übersicht und einer Detailanzeige zu den Themen Debugger-Events, Memory und CPU-Utilization. Das Übersichtsfenster ermöglicht es Entwicklern, den aktuellen Speicher- und CPU-Verbrauch während einer Debugging-Session live mitzuverfolgen. Für weitere Analysen kann das Detailfenster herangezogen werden.

Der Live Visual Tree

Die mächtigsten Neuerungen bezüglich Debugging in Visual Studio 2015 sind der Live Visual Tree und das Live Property Window. Mit dem aktuellen Stand von Visual Studio 2015, dem Release Candidate (RC), beschränkt sich der Einsatz der beiden Tools allerdings auf WPF-Anwendungen. Die Unterstützung für WinRT (Windows-Store-Apps) ist geplant und wird voraussichtlich über ein Update in Visual Studio 2015 einfließen.

Der Live Visual Tree stellt den WPF Visual Tree der Anwendung grafisch dar. Er zeigt alle visuellen Elemente – das sind in WPF alle Objekte, die von System.Windows.Media.Visual ableiten – in einer hierarchischen Darstellung an. Neben Namen und Typ jedes Objekts ist die Anzahl der Kindelemente (Child Visuals) ersichtlich. Die Darstellung ist „live“: Alle Änderungen an der Anwendung werden sofort im Live Visual Tree angezeigt. Die Anzahl der Kindelemente ist von besonderem Interesse, da die Performance von WPF-Anwendungen in den meisten Fällen direkt von der Anzahl der Elemente im Visual Tree abhängt. Über die Funktion View Source aus dem Kontextmenü wird die Datei geöffnet, in der das entsprechende Element definiert ist. Da XAML-Fragmente oft über Styles ausgelagert werden, unterstützt View Source Entwickler dabei, sich schneller in einem XAML-Projekt zurechtzufinden.

Abb. 3: Die CFI-Stocktrader-Anwendung

Abb. 3: Die CFI-Stocktrader-Anwendung

Abb. 4: Der Live Visual Tree

Abb. 4: Der Live Visual Tree

Abb. 5: Die Wertschriftenüberschrift mit Markierung

Abb. 5: Die Wertschriftenüberschrift mit Markierung

Das folgende Beispiel zeigt die Funktionsweise des Live Visual Trees anhand der CFI-Stocktrader-Anwendung (Abb. 3). Dabei handelt es sich um eine Referenzimplementierung für das PRISM Composite Application Framework. Abbildung 4 zeigt den Live Visual Tree für die Wertschriftenübersicht (Abb. 5). Der Tree zeigt klar auf, dass die Wertschriftenübersicht aus einem Grid (Root-Element im Tree in Abb. 4) mit zwei Kindelementen, nämlich der RoundedBox und einem ContentPresenter namens PART_SelectedContentHost, besteht. Aufgeführt ist jedes Visual, das sich innerhalb des ContentPresenters befindet. Der Visual Tree kann bis zum GridViewRowPresenter aufgeklappt werden, der eine einzelne Zeile im Grid darstellt. Durch weiteres Aufklappen ist die Navigation bis zu den einzelnen TextBlock-Elementen für die Zellen möglich. Durch die Funktion Enable selection in the running Application wird das aktuelle Element aus dem Live Visual Tree in der laufenden Anwendung mit einem roten Rahmen markiert.

Für die Selektion der Elemente stehen mehrere Möglichkeiten zur Verfügung. Neben dem Klick auf das Element im Tree kann ein Element direkt in der Anwendung ausgewählt werden. Durch Aktivierung des Enable Selection In The Running Application-Buttons im Live Visual Tree werden die Visuals in der laufenden Anwendung bei Mouseover markiert. Ein Klick auf das Element selektiert es im Live Visual Tree.

Im Beispiel bewegt sich die Maus über das Pluszeichen, das durch einen roten Rahmen markiert wird. Per Mausklick wird es im Live Visual Tree ausgewählt, der uns verrät, dass es sich um ein Path-Objekt handelt, das in der Datei Styles.xaml definiert ist. Mit View Source aus dem Kontextmenu öffnet Visual Studio die entsprechende Codedatei.

Der Live Property Explorer

Sobald ein Element im Live Visual Tree selektiert wird, zeigt Visual Studio dessen Properties im Live Property Explorer an. Im Beispiel selektiert der Entwickler den Order Type ComboBox in der Detailansicht (Abb. 6). Der Live Visual Tree zeigt, dass das selektierte Element ein Border-Objekt ist, das ein Kind vom ToggleButton ist, der wiederum ein Kind der eigentlichen ComboBox ist. Der Live Property Explorer zeigt die Properties an, die für dieses Border-Objekt aktuell gültig sind. Hilfreich ist, dass die Properties nach deren Scope gruppiert sind. Das heißt, es ist auf den ersten Blick ersichtlich, dass beispielsweise Background und Borderbrush als lokale Werte über den in Styles.xaml definierten Style gesetzt sind. Im Gegensatz zu den lokal gesetzten Werten wurde der DataContext über Vererbung von einem Parent-Objekt bezogen.

Abb. 6: Der Order Type „ComboBox“

Abb. 6: Der Order Type „ComboBox“

Im Suchfenster des Live Property Explorers kann nach Properties gesucht bzw. gefiltert werden. Filtert der Entwickler beispielsweise nach Background, findet Visual Studio die Background-Property in den drei Scopes: Default, Computed Values und Local. Der Default-Wert ist durchgestrichen, da er durch den aktiven Wert aus dem Scope Local überschrieben wurde.

Natürlich können die Properties im Live Property Explorer während dem Debugging auch verändert werden, und die laufende Applikation wird automatisch angepasst. Wichtig ist zu beachten, dass die geänderten Properties in der aktuellen Version nur zur Laufzeit bestehen und nicht persistiert werden. Die Anpassung der geänderten Properties im Quellcode per Knopfdruck ist ein weiteres geplantes Feature.

Der Vergleich mit anderen Tools

Nach dem Überblick über die neuen Visual-Studio-2015-XAML-Debugging-Tools ist es an der Zeit, diese mit bestehenden Produkten von Drittherstellern zu vergleichen. Tabelle 1 vergleicht die Tools in Bezug auf Kosten und Kompatibilität. Alle Tools bieten die Basisfunktionen für Anzeige und Veränderung des Visual Trees und der Properties. Die Unterschiede bestehen hauptsächlich in der Kompatibilität und in den zusätzlichen Features.

Tabelle 1: Die Visual-Studio-2015-Tools im Vergleich

Tabelle 1: Die Visual-Studio-2015-Tools im Vergleich

Der folgende Abschnitt geht auf die einzelnen Tools ein und zeigt deren Stärken und evtl. Schwächen auf:

Visual Studio 2015

Die Stärke der Debugging-Tools in Visual Studio ist, dass sie in allen Editionen von Visual Studio 2015 integriert sind und somit out of the box zur Verfügung stehen.

Snoop

Snoop ist ein Open-Source-WPF-Tool, das auf CodePlex kostenfrei heruntergeladen werden kann. Snoop bietet mit der 3-D-Explosionsansicht ein besonderes Feature. So kann beispielsweise erkannt werden, ob Objekte nicht sichtbar sind, weil sie unbeabsichtigt von einem anderen Objekt überdeckt werden. Ein weiteres Feature ist die Möglichkeit, den DataContext und die RoutedEvents in Echtzeit zu verfolgen. Ein Geheimtipp: Die Funktion Show only visuals with binding errors reduziert den Visual Tree auf die Elemente, bei denen ein fehlerhaftes Data Binding konfiguriert ist. Der Befehl kann über die Filter-TextBox ausgewählt werden.

WPF Inspector

Der WPF Inspector bietet neben den Visual-Tree- und Property-Inspection-Features noch eine ganze Reihe an nützlichen Zusatzfunktionen:

  • Trigger Debugging
  • Style Tracing
  • Resource Explorer
  • Performance, Maintainability and Stability Checks

XAML Spy

XAML Spy ist nahtlos in die Visual-Studio-Entwicklungsumgebung integriert und bietet einen breiten Plattformsupport. Zusätzlich sind folgende Features vorhanden:

  • Isolated Storage Explorer mit Backup und Restore
  • Live-Performance-Monitoring (Kennzahlen für Speicherverbrauch und Framerate)
  • Sensor Explorer für mobile Geräte
  • Explorer für den Automation Visual Tree

Der Nachteil des XAML Spy ist, dass die vollen Features nur in der kostenpflichtigen Version verfügbar sind.

WinRT XAML Toolkit VisualTreeDebugger

Das Debugging von WinRT-Anwendungen wie Windows-Store-Apps wird in Visual Studio 2015 noch nicht unterstützt, ist aber geplant. In der Zwischenzeit sei auf den VisualTreeDebugger aus dem WinRT XAML Toolkit verwiesen, der ähnliche Funktionalität bietet wie der Live Visual Tree.

Zusammenfassung

Visual Studio 2015 bringt viele Neuerungen in Bezug auf das Debugging von Anwendungen mit sich. Speziell im Hinblick auf WPF-Applikationen kommen nützliche Tools in den Entwicklerwerkzeugkasten. Dem Live Visual Tree und dem Live Property Explorer kommt im Vergleich zu bestehenden WPF-Debugging-Tools von Drittherstellern ihre Verfügbarkeit zugute, da sie mit allen Editionen von Visual Studio ausgeliefert werden. Wenn es um die Kompatibilität oder zusätzliche Features geht, haben jedoch die Drittherstellerprodukte (noch) die Nase vorn.

Für WPF-Entwickler ist es beruhigend festzustellen, dass Microsoft in Windows Presentation Foundation investiert und die lange gewünschten Features mit Visual Studio 2015 implementiert und ausliefert. Das WPF-Team hat noch einige Ideen im Backlog, die in den Updates zu Visual Studio 2015 in das Produkt einfließen werden. News zu neuen Features in Visual Studio und speziell zu Windows Presentation Foundation gibt es im Visual-Studio-Blog und im WPF-Team-Blog.

Aufmacherbild: A metal spider standing on a printed circuit board via Shutterstock.com / Urheberrecht: gregflat

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -