Visual Studio 2015 Update 2 XAML Debugging Improvements

FacebookTwitterGoogle+Share

I felt one of the coolest things in Visual Studio 2015 for XAML developers was the Live Visual Tree Debugger. In the past there were tools like Snoop and XAML Spy which were so very useful but it was exciting to see this kind of functionality built in to Visual Studio.

Visual Studio 2015 Update 2 was announced and released at the BUILD conference last week, and when I installed it (download it here) and ran my app in the debugger, I saw an unexpected surprise. Overlaid on top of the app window was a new set of buttons:

image

The first button is to go to the Live Visual Tree debugger window in Visual Studio, not too interesting.

image

The second button enables selection. This one is really interesting, because when you click on a visual element in your app, it will be selected in the visual tree debugger. This button was already available in Visual Studio in the Live Visual Tree pane, but it’s a lot more convenient to have it right in your app.

image

The third button, “Display Layout Adorners”, I’m not really sure how useful this is, but maybe I’m missing something.

These buttons also exist inside Visual Studio 2015 in the Live Visual Tree pane just like they did before, but there is a new button which lets you turn on and off the toolbar that shows up inside your app.

image

If you are debugging an app with source code, then in the Live Visual Tree pane, beside any element can be resolved to the corresponding XAML file, you’ll see an icon that lets you navigate to the XAML definition:

image

Another thing I think is pretty interesting is that you can debug other XAML based applications even if they aren’t yours. One example of this is the Settings dialog in Windows 10. If you open the settings dialog, and then switch to Visual Studio 2015 Update 2 and you select Debug and then Attach to Process, you should be able to pick to debug SystemSettings.exe:

image

You can do the same with the Edge browser, Groove Music, the Store app, or a bunch of other apps. Most of the built in Windows 10 dialogs use XAML. So if you attach the debugger, you should see the same toolbar show up inside this app:

image

The one difference is that since you don’t have the source code, you won’t see the buttons next to elements that let you navigate to the XAML, but you should still be able to see all of the visual elements in the Live Visual Tree pane.

UPDATE: It works for WPF too! Here is a debugger attached to another instance of Visual Studio (Visual Studio uses WPF for its user interface):

image

By running this tool against other apps you can see how they implemented their XAML and it can give you some ideas for your own app.