F12 XAML Debug Developer Tools

Der Betreff ist frei erfunden. Es gibt keine F12 Taste für XAML, nein es ist viel besser. Mit Visual Studio 2015 kann man WPF Anwendungen und den darin enthalten XAML Code zur Laufzeit analysieren. Dabei muss man nicht mal den Quellcode besitzen. Das geht mit jeder beliebigen Anwendung und dem Visual Studio enthalten Tools:  Live Views XAML – Live Visual Tree und Live Property Explorer.

Wenn eine WPF Anwendung läuft, kann sich der Visual Debugger an den laufenden Prozess hängen (Debuggen – an den Prozess anhängen oder STR ALT P). WPF Anwendungen sind leicht zu erkennen, da sie vom Typ managend Code sind.

image

Im Eigenschaftsfenster visuelle Echtzeitstruktur (visual Tree) ist die XAML Struktur zu erkennen. Ganz ähnlich wie im Browser DOM Explorer lässt sich per Pfeil in der WPF Anwendung das UI Element auswählen.

image

Zusätzlich lassen sich live im weiteren Eigenschaftsfenster Echtzeit Eigenschafts Explorer sämtliche Properties der deklarativen UI ändern. Hier wurde die Beschriftung (Caption) ersetzt.

image

Für die neuen Windows Universal Plattform Apps ist die Vorgehensweise etwas anders, aber im Ergebnis gleich überzeugend. Dazu wird in Visual Studio über andere Debug Ziele (other debug tragets)- ein vorhandenes installiertes App-Paket ausgewählt. Die App darf nicht laufen.

image

Da UWP kein managend sondern native Code ausführt, muss die Option systemeigen (native only) gewählt werden. In diesem Beispiel nehmen wir uns die Windows 10 Wetter App vor um zu erforschen wie der XAML Code aufgebaut ist

image

Die App Startet und Visual Studio zeigt den visual XAML Tree. Hier im Bild mit ausgewählter Layout Adorner Funktion (zweite Icon von links).

image

Auf die neuen visuellen WPF Debugging Funktionen bin ich gestoßen im Rahmen der Vorbereitung meiner ADC WPF Session.

Kommentare sind geschlossen