Inspecting XAML in Windows 8 Store Apps / VS2012

Question

I\'m looking for a way to inspect running XAML in a Windows 8 store app. Essentially, I want firebug / chrome inspector style functionality where I can look at the XAML source g

Answer 1

The VisualTreeDebugger class from WinRT XAML Toolkit is what you could use if you want a free tool. It doesn't do as much as XAML Spy, but you get what you pay for. I thought of adding more features to it like actual visualization of what you debug, but the work required would not justify the time investment + I didn't want to step on Koen Zwikstra's turf. I am sure he is doing a great job on that tool. Anyways - VisualTreeDebugger is enough for me, so maybe it would also be enough for you.

The way you can use it is add the class to your code, add a reference in your XAML like

xmlns:debug="WinRTXamlToolkit.Debugging"

then put a hook on a control where you would like to start debugging, like

debug:VisualTreeDebugger.BreakOnLoaded="True"

which will dump the core visual tree details as text in your debugger output window (Ctrl+W,O) and break in the code that dumped your tree where you can investigate the "path" variable, which contains the list of all visual tree elements from the debugged control to the root, so you can watch their values if what you need wasn't already dumped in the output window.

Other options include

debug:VisualTreeDebugger.BreakOnTap="True"
debug:VisualTreeDebugger.BreakOnLayoutUpdated="True"
debug:VisualTreeDebugger.BreakOnLoaded="True"
debug:VisualTreeDebugger.TraceOnTap="True"
debug:VisualTreeDebugger.TraceOnLayoutUpdated="True"
debug:VisualTreeDebugger.TraceOnLoaded="True"

Since it is source code and really a single simple class - you can easily add additional things to the code to do any custom debugging you need.

Answer 2

WinRT XAML Toolkit now has an actual visual - visual tree debugger.

Get it from NuGet: nuget.org/packages/winrtxamltoolkit.Debugging then call WinRTXamlToolkit.Debugging.DC.ShowVisualTree() to display the debugger tool inside of your app. It's the third option so now you can use

• the WinRTXAMLToolkit.Debugging.VisualTreeDebugger class - that enables you to debug the tree in your Visual Studio
• XAML Spy - which is a great commercial visual tree debugger that runs in a separate window
• and now this visual tree debugger in the WinRT XAML Toolkit that works inside of your app.

Answer 3

there is a new free tool called XAML Inspector. It's available through NuGet. Just search for "xamlinspector" or get if from the project page: www.xamlinspector.com

Greetings Christian

Answer 4

XAML Spy is what you need. You find it at http://xamlspy.com.