Debug windows live visual tree — Ваш верный помощник с OS Windows

Время на прочтение7 мин

Количество просмотров24K

В Visual Studio 2015 были заметно улучшены инструменты для отладки и диагностики .NET-приложений. Пожалуй, самым значимым нововведением стал Diagnostic Tools Hub, позволяющий выполнять профилирование в ходе отладки. Давайте посмотрим, какие же новые возможности появились в VS 2015.

Вот список новых инструментов:

PerfTip
Режим Edit & Continue для x64-систем
Lambda Expression Evaluation в Watch and Immediate Window
Diagnostic Tools Window
Live Visual Tree и Live Property Explorer
Diagnostic Tools Hub

PerfTip

Debugging tips — это маленькие подсказки, всплывающие в ходе отладочной сессии и отображающие значения переменных. Они уже давно присутствуют в VS и, думаю, все с ними знакомы. Теперь вместо них PerfTip выполняет ту же цель: облегчает отладку и повышает её продуктивность. В отличие от Debugging tips, в PerfTip при перемещении по коду отображается информация о тайминге. Раньше нам приходилось собирать тайминги построчно, вставляя код для проведения измерений, вроде класса System.Diagnostics.Stopwatch. Но теперь необходимость в этом отпала: PerfTip умеет измерять время, прошедшее между двумя остановками отладчика. Причём не имеет значения, используете ли вы Step Into, Step Over или Run to Cursor для измерения лишь одной инструкции или целого блока кода. Тайминги отображаются как в PerfTip, так и в виде списка в Diagnostic Tools Window).

PerfTip показывает, что на выполнение метода BuildOpenMenu () ушло 1,357 секунды.

Режим Edit & Continue для x64-систем

Функциональность “edit and continue” появился в VS несколько лет назад, но раньше он мог использоваться только для отладки 32-битных процессов. В этом режиме вы можете модифицировать код, не выходя из отладочной сессии. При этом он перекомпилируется в фоне и сразу готов к использованию. Преимущества очевидны: вы можете построчно выполнять код, анализировать результат, модифицировать, перемещать курсор оператора перехода на позицию перед модифицируемой строкой и вновь её выполнять. И вам даже не понадобится перезапускать отладчик.

Как следует из заголовка, теперь этот режим доступен и для 64-битных процессов. Однако для этого необходимо наличие .NET Framework 4.5.1 или выше.

Вычисление лямбда-выражений в Watch and Immediate Window

VS 2015 теперь поддерживает вычисление лямбда-выражений в отладочных окнах. Это бывает удобно, например, при анализе коллекций. Допустим, у вас есть список людей на 50 000 записей, и вам нужно найти человека с фамилией Meyer. Раньше это можно было сделать лишь одним способом: добавив коллекцию в окно просмотра (watch window), развернув её и пролистав весь список вручную. Не слишком увлекательный и эффективный процесс, особенно, если список велик. Теперь же вы можете найти нужную запись с помощью простого LINQ-выражения:

Diagnostic Tools Window

В ходе отладки в этом окне можно применять инструменты для профилирования. Чтобы его открыть, выберите пункт Show Diagnostic Tools в меню Debug. По умолчанию в нём будут отображены графики загрузки процессора и памяти. Жёлтые маркеры обозначают работу сборщика мусора. В предыдущих версиях VC все эти данные можно было получить только во время сессии профилирования. Теперь же, вместо многократной процедуры записи и анализа, вы можете наблюдать за поведением системы в реальном времени в процессе отладки. Вы сразу обнаружите всплески в использовании ресурсов, в том числе при сборе мусора, и сможете сопоставить их с отлаживаемым фрагментом кода или действием, выполняемым в интерфейсе.

Другим важным нововведением стал список всех PerfTip. Каждый раз, когда отладчик останавливается и выводит PerfTip, он добавляет новое измерение список в Diagnostic Tools Window. Благодаря этому списку вы можете наблюдать за замерами времени и быстро переходить к соответствующим строкам.

Окно диагностики позволяет не только оценить загрузку процессора и памяти, но и записать одним кликом слепок управляемой памяти. При этом система автоматически подсчитает и отобразит количество объектов в куче, а также их общий размер в байтах. На эти значения можно кликнуть и посмотреть подробный список всех объектов, присутствующих в памяти. Всё это позволяет быстро обнаружить причины каких-либо проблем с памятью, например, утечек. Обратите внимание, что данный инструмент полностью интегрирован в отладчик и не требует его перезапуска.

Live Visual Tree и Live Property Explorer

Это два инструмента, разработанные специально для WPF-приложений (Windows Presentation Foundation) и универсальных приложений. С их помощью можно анализировать запущенную программу, отобразив её в качестве «визуального дерева» (visual tree). Визуальное дерево — это внутреннее представление пользовательского интерфейса, содержащее все видимые элементы приложения. Получается очень похоже на инструменты для веб-разработчиков, запускаемые в браузерах командой «исследовать элемент». Визуальное дерево позволяет одним кликом выбрать элемент пользовательского интерфейса, просмотреть и изменить как сам элемент, так и его свойства. Все изменения сразу будут применены в запущенном приложении. А раньше это можно было сделать только с помощью сторонних приложений, например, Snoop или WPF Inspector.

На иллюстрации ниже представлен пример визуального дерева WPF-приложения. Слева представлена программа Family.Show, её референсная WPF-реализация создана компанией Vertigo и доступна для скачивания на Codeplex. На иллюстрации выделена фотография принца Чарльза, и её свойства отображены справа в Live Visual Tree. Дерево начинается с класса MainWindow и развёрнуто вплоть до выбранного объекта. А в колонке справа отображается количество дочерних объектов для каждого визуального элемента.

Если кликнуть правой кнопкой на объекте внутри дерева, то появится контекстное меню. В нём есть полезные пункты Go to source и Show Properties. Первый открывает файл XAML, содержащий определение элемента. А второй пункт запускает Live Property Explorer.

Здесь представлены свойства элемента и их значения. При этом Live Property Explorer позволяет группировать свойства по происхождению их значений. Из иллюстрации видно, что значения бывают по умолчанию, вычисленные, унаследованные и локальные. Также они могут быть получены из файла определения стилей XAML. Все значения можно изменять прямо в Live Property Explorer и сразу наблюдать, какой эффект это оказывает на работающее приложение.

Diagnostic Tools Hub

Этот инструмент появился в Visual Studio 2013. Запустить его можно через Debug -> Start Diagnostic Tools without Debugging, он является точкой запуска для всех инструментов, имеющих отношение к производительности и диагностике. Diagnostic Tools Hub представляет собой набор многочисленных маленьких инструментов, каждый из которых измеряет, записывает, вычисляет и отображает в окне Visual Studio только какой-то один параметр. Все инструменты используют единую структуру визуализации данных в виде временной шкалы с подробностями по каждой записи. Шкала представляет собой гистограмму основного измерения, на которой могут отображаться пользовательские маркеры для особых событий или значений. Можно просматривать данные более подробно, при этом форма отображения будет разной для всех инструментов. Так что при желании можно более детально изучить параметры любого измерения и вывести общую информацию в виде круговой диаграммы. Поскольку формат вывода у всех инструментов общий, то в течение одной сессии можно одновременно запускать несколько инструментов, просматривая результаты их измерений в компактном виде. Например, можно скомбинировать индикатор активности пользовательского интерфейса и уровень загрузки процессора. Раньше эти инструменты были заточены, в основном, под приложения для Windows Store. Благодаря своей простоте и унифицированному дизайну набор инструментов очень часто обновляется, и в VS 2015 многие из них поддерживают и другие технологии, например Windows Presentation Foundation.

Старый профилировщик в Visual Studio, умевший измерять загрузку процессора и памяти, не вписывался в концепцию маленьких диагностических инструментов со стандартным форматом вывода данных. Поэтому ради обратной совместимости его интегрировали в Diagnostic Tools Hub. Создатели VS планируют постепенно распределить функциональность профилировщика по нескольким отдельным инструментам, доступным из хаба.

Итак, какой же набор инструментов представлен в Diagnostic Tools Hub в Visual Studio 2015:

Application Timeline: позволяет мониторить активность UI-потока приложений, основанных на XAML
CPU Usage: использование процессора ()
GPU Usage: отображает выполняемые графической картой инструкции для DirectX-приложений
Memory Usage: отображает потребление памяти для обнаружения утечек
Performance Wizard: старый профилировщик Visual Studio
Energy Consumption: отображает расчётное потребление энергии для мобильных устройств
HTML UI Responsiveness: позволяет мониторить активность UI-потока приложений, основанных на HTML
JavaScript Memory: анализирует использование памяти в HTML-приложениях
Network: профилирует сетевой трафик

На следующей иллюстрации изображены графики ряда параметров системы при запуске WPF-приложения. В данном случае используются Application Timeline и CPU Usage. На шкале отображается активность UI и частота кадров в FPS. Отдельно показаны парсинг XAML, вывод макета, отрисовка, операции ввода/вывода, код приложения и прочие активности. Цветовая дифференциация позволяет быстро ориентироваться в графике. График CPU utilization отражает загруженность процессора, в данном примере он задействован на 12,5%. То есть на восьмиядерной машине одно ядро полностью занято UI-потоком. При необходимости вы можете регулировать масштаб шкалы и подробнее изучать какие-то интервалы.

Далее приведён пример подробной детализации той же сессии. События разбиты по категориям и отображены в виде полосок, длина которых соответствует продолжительности каждого события. Это позволяет очень легко оценить, сколько времени у вас занял парсинг, вывод макета, чтение и запись с диска или сборка мусора. Некоторые события можно развернуть в виде дерева для ещё более подробного изучения.

Заключение

В Visual Studio 2015 есть много замечательных возможностей по отладке, диагностике и профилированию, которые могут помочь поднять производительность разработчика. Все упомянутые инструменты есть в каждой редакции VS, вплоть до бесплатной Visual Studio Community Edition. Здесь вы найдёте для себя всё необходимое. При этом впервые в истории VS профилирование можно осуществлять прямо во время отладки. В Visual Studio 2015 профилирование приложений объединено с процессом удобной отладки, ежедневно применяемой разработчиками.

Полезные ссылки:

Family.Show, WPF-приложение: https://familyshow.codeplex.com/
Snoop – The WPF Spy: https://snoopwpf.codeplex.com/
WPF Inspector: http://www.wpftutorial.net/Inspector.html
Visual Studio Community: https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx

Источник

live visual tree

Debug > Windows > Live Visual Tree

Toggle between showing all WinUI XAML or just XAML you have written:

Show all elements in the MainWindow:

The numbers indicate how many children (direct and indirect) each element contains:

Click to enable a toolbar that floats over the app UI:

Select Element—select an element in UI and it will be selected in Live Visual Tree:

Click brackets to navigate to this element:

inspecting properties at runtime with live property explorer

Live Property Explorer always shows the properties of the element selected in the Live Visual Tree:

This Padding property is crossed out because it is set by a more specific Style.

Changes made to values in Live Property Explorer do not persist.

Источник

By Mithun Mathangadeera

When working with XAML it’s really hard to debug, fortunately since Visual studio 2015 introduced Live Visual Tree and Live Property Explorer, it’s facilitate inspect XAML properties while debugging

First we will create a simple sample screen.

Now let’s run an application and we’ll see how it works on Live Visual Tree and Live Property Explorer.

You can find this window, on the Visual Studio left hand side menu. If it’s not showing in that menu you can enable it using Debug->Windows and click on Live Visual Tree. Remember that a solution that’s not running will not show its live visual tree section.

Live visual Tree has 4 main components:

Starting from Left hand Side

Go to Live Visual tree

By clicking on this icon, we can navigate to Visual tree.

Enable Selection

This icon will Enable/Disable select XAML elements.

Display Layout adorners

We can enable select Layout Adorners by clicking on this icon.

Track Focused element.

Selected element track with Visual Tree.

Now let’s see how we use Live visual Tree after running an application. You can get visual tree by clicking ‘Go to Live Visual tree’ button and then after that click ‘Enable Selection’ to select XAML elements.

Select the element to show in Live Visual Tree.

After selecting an element you can see its entire structure

Then right click on the selected element (TextBlock to get the sub-menu)

Clicking show property we can get property window of TextBlock

Using this window we can get an idea what are the values that apply to an element, as well as we can change values and see how they works. Let’s change text and font size and see how it works.

We can see our changes in real-time and will it not help for us to be able to inspect XAML Elements? Actually this feature is initially introduced with Visual Studio 2015 CTP 6 and Microsoft has mentioned that this feature will be available in Universal Windows Platform applications as well in the future.

For more reading check this link:

https://visualstudiomagazine.com/articles/2015/08/01/debuggingxaml.aspx
http://amadeusw.com/debugging/live-visual-tree-vs

Источник

Шаблоны элементов управления

Логическое и визуальное дерево

Последнее обновление: 15.02.2016

Несмотря на то, что стили существенно облегчают манипулирование внешним видом элементов управления,
гораздо более сильным средством в плане визуализации являются шаблоны. В отличие от стилей шаблоны помогают полностью менять модель визуализации элемента.
Чтобы понять шаблоны, необходимо осознать общую концепцию визуализации в WPF.

Визуализация в WPF тесно связана с такими понятиями как логическое и визуальное дерево. Эти деревья являются своего рода каркасом приложения.
Так мы можем представить приложение как некий набор вложенных элементов. Возьмем, к примеру, следующую простейшую разметку xaml:

<Window x:Class="ControlsTemplateApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ControlsTemplateApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="300">
    <Grid>
        <Button x:Name="myButton">Hello</Button>
    </Grid>
</Window>

Структуру элементов здесь можно представить следующей схемой:

То есть в Window есть Grid, в Gride — элемент Button, в кнопке в качестве содержимого установлен некоторый текст в виде объекта String. В итоге
получается некое дерево элементов, которое называется логическим. В WPF оно представлено классом
System.Windows.LogicalTreeHelper. Логическое дерево имеет дело с визуализацией как таковой, оно образует модель доступа к дочерним элементам.

От него отличается визуальное дерево, представленное классом System.Windows.Media.VisualTreeHelper. Так, визуальное дерево для вышеприведенной разметки xaml будет
выглядеть следующим образом:

Визуальное дерево получается гораздо сложнее, оно показывает, как с визуальной точки зрения устроен элемент, из каких частей он состоит.

Visual Studio имеет встроенные средства для просмотра визуального дерева элементов. Для этого нам надо запустить проект в режиме отладки и в меню
выбрать пункт Debug -> Windows -> Live Visual Tree. После нажатия на этот пункт Visual Studio откроет окно с визуальным деревом, в
котором мы можем посмотреть, как устроен элемент:

Если мы нажмем правой кнопкой мыши на элемент в этом дереве и в контекстном меню выберем пункт Show Properties, справа в
Visual Studio откроется окно свойств для этого элемента.

Визуальное дерево элемента управления опредлеляет, как будет выглядеть этот элемент или иными словами его шаблон. Шаблон элемента — это своего рода визуальный скелет элемента управления.
Например, для элемента Button упрощенно шаблон выглядит следующим образом:

<Style TargetType="Button">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
  <Setter Property="MinHeight" Value="23"/>
  <Setter Property="MinWidth" Value="75"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border 
          x:Name="Border"  
          CornerRadius="2" 
          BorderThickness="1"
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}">
          <ContentPresenter 
            Margin="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsKeyboardFocused" Value="true">
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsDefaulted" Value="true">
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Полное описание шаблона кнопки можно найти по ссылке https://msdn.microsoft.com/en-us/library/ms753328%28v=vs.100%29.aspx.

Здесь мы можем увидеть, что сам шаблон задается с помощью стиля при определении сеттера для свойства Template. Чтобы
определить сам, шаблон, применяется элемент ControlTemplate. И как раз в этом элементе мы можем увидеть и элемент Border, и элемент
ContentPresenter, которые составляют визуальное дерево кнопки.

Источник

Debugging tools have always been our friends for detecting errors in our code. Almost every modern (object oriented) language have debugging tools in it. In visual studio we use break points to debug our code written in C++, VB and C#. There was the requirement of debugging tools for the language (Xaml), which is used to make user interface. With the release of visual studio 2015, Microsoft have introduced new tools for adaptive UI and especially for debugging xaml. This UI debugging technology work for both UWP and WPF applications. There are two new explorer windows introduced for this purpose, which are live visual tree and live property explorer.

Debugging Xaml

This debugging xaml technique have made easy to find errors in the UI code. In this article, I will show you a UWP example that how to use live visual tree and live property explorer for debugging UI code.

Note: You can work with live visual tree and live property explorer only when your app is running.

Open visual studio 2015 and make a new empty universal windows C# project.
Open the MainPage.xaml file and you will a main Grid element will be there by default.
Inside that main grid element, add the following piece of code.

<Grid.RowDefinitions>
 <RowDefinition Height="3*"/>
 <RowDefinition Height="1*"/>
 <RowDefinition Height="1*"/>
 <RowDefinition Height="1*"/>
 <RowDefinition Height="3*"/> 
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="1*"/>
 <ColumnDefinition Width="1*"/>
 <ColumnDefinition Width="2*"/>
 <ColumnDefinition Width="1*"/>
 </Grid.ColumnDefinitions>
 <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Text="Username" FontSize="30"/>
 <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Text="Password" FontSize="30"/>
 <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3" Text="Email" FontSize="30"/>
<TextBox Background="Yellow" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="2" Grid.Row="1" Width="300" FontSize="30"/>
 <TextBox Background="Yellow" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="2" Grid.Row="2" Width="300" FontSize="30"/>
 <TextBox Background="Yellow" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="2" Grid.Row="3" Width="300" FontSize="30"/>

After copying the above code, your UI should look like this.

Now, you need to check whether the two debugging explorers are marked as checked in options of visual studio. So, go to the Tools > Options > Debugging > General and check the live visual tree check box as shown in the image below.

You will not see any of the live visual tree or live property explorers right now. As I have already told, it will be only visible when your app is running. So now, save your project and run your application.

Tip: If the live visual tree check box in options of visual studio was unfortunately unchecked and you have run your app, you can still view live visual tree by going to Debug > Windows and then you will see both visual tree and property explorer options as well. But these options will only be visible in debug > windows, when you app is running.

You will see a running app similar to what we expected as shown in the first image above. Keep it in a running mode and come back to visual studio. On the top left side of visual studio, you will an explorer on live visual tree would be visible as shown in the image above.

This is a complete visual tree that is representing the element’s relationships including the parents and children of the elements. The numbers in front of each element represent the descendants of that element. If you expand any element, you will see its descendants. A small icon in front of each element shows its definition in a particular xaml file.

In the above window, you can see there are six small icons at the top of this live visual tree explorer. I will explain these one by one and I would ask you to check these yourself as well. Select only the first option first and deselect all other options as shown in the image below.

This option let you see any selected element in the UI to show in live visual tree. Like option the running app window and select the any of the UI element from that running window (as it will also help you to select with the dotted border). One you will select any of the UI element, you can then see where that element exist in the live visual tree as shown in the image below.

If there are too many elements on the UI, it can be harder to find which element is selected and you can find that in this way. Keep previous (first) option selected and select the second option at the top of live visual tree. In the live visual tree, select the element. I have selected third text block and open the running app window. You will see that it will show which item we selected by highlighting that element in the UI of running window as shown in the image below.

Note: We are doing all this at run time, which was not allowed in the previous versions of visual studio.

Now select the third icon as well at the top of live visual tree. It is so simple as when you select any of the element in live visual tree, it will highlight that element in xaml code. The fourth and fifth options are just of expanding and collapsing the element’s tree in live visual tree.

Deselect the first and second options at the top of live visual tree and keep third option selected. As first and second options will not allow us to write any thing in the text box of the running window.

Now click on the sixth option or open the live property explorer shown on the right side of the visual studio. You will see a property window something like below one.

It is showing the properties of first text box that is selected in the live visual tree. Open the running app window and write something in the first text box. Now come back to visual studio and select that (first) text box from the live visual tree. Now see the live properties window, you will see that the text field will have that value as shown in the image below.

You can see the properties window show the input value of text box at run time. Now if we change this value in the live properties window, it will also be changed in the running window.

There are many other properties as well in the properties window. You can also change any of the properties (including style resources, computed values) from the properties window. In most cases, your elements are bound with properties of your view model classes using data context and you need to see whether those property values are showing correct in the UI elements or not. You can see those as well from the properties window. You can change that element’s value from the properties window, and check that property value in your back end code as well (using break points) at run time.

Note: You can debug you xaml and back end code at the same time with the help of live visual tree and live property explorer for xaml and break points for back end code.

Here I have just shown you an example of debugging xaml, with the help of text property of a text box. You can explore it further by adding other elements in xaml and play with different properties of those elements in the live property window.

I hope that you have learned this amazing debugging tool for xaml. If you have any question or want to share some thing on this topic, just comment below this post. Thank you 🙂

Источник