Live Visual Tree and Live Property Explorer are two tool windows which will help you to perform XAML debugging more easily. You can now inspect the XAML at runtime and visualize the layout to show alignments and space for UI elements. If you have lots of data bindings, you can use Live Visual Tree and Live Property Explorer to change properties in runtime and see how it affects the design of the running application. You can invoke the tool windows by navigating to the Visual Studio menus, Debug | Windows | Live Visual Tree and Debug | Windows | Live Property Explorer, respectively:

When you run an XAML application from Visual Studio and the debugger is attached, you will notice the following, as shown in the preceding screenshot:

• The Live Visual Tree window (highlighted as 1 in the screenshot) gives you a tree view of the UI elements of your running XAML application and provides information about the number of XAML elements inside each container. If the interface changes from one state to another, Live Visual Tree also changes in runtime.
• The Live Property Explorer window (highlighted as 2) provides you with default values of the properties for the visual element that you have selected. By default, these fields are in disabled mode. But you can add a new entry to Local by clicking the New button and overriding the existing value. When you stop the debugging instance, the local changes will get lost.
• You will also notice a floating toolbar (highlighted as 3) on your application, which is only available in debug mode. This allows you to easily select the element in the running instance of the application and inspect its Visual Element in the Live Visual Tree. The floating toolbar contains four buttons: Go to Live Visual Tree, Enable Selection, Display layout adorners, and Track focused element, as shown in the following screenshot: