Отладка при помощи средств визуализации отладчика (Debugger Visualizers) Visual Studio 2005

ОГЛАВЛЕНИЕ

При отладке проекта в Visual Studio .NET 2002/2003, вы можете увидеть значение текущих переменных путем ввода переменной в окно Watch, либо путем наведения мыши на переменную в окне с кодом. Хотя данный подход прекрасно работал с переменными простого типа либо с обычными значениями, данный пользовательский интерфейс был не настолько идеален для более сложных типов и длинных значений. К примеру, если бы вы работали над приложением, которое управляло бы содержимым XML-файла, то вы наверняка захотели бы исследовать его содержимое. Это было бы нелегким заданием, если бы вы имели XML-содержимое, которое было бы длиннее, чем парочка дюжин символов, так как Visual Studio .NET отформатировал бы содержимое в одну длиннющую строку текста. Это немного осложняет задачу, если необходимо  быстро исследовать содержимое XML-файла! К счастью, отладчик в Visual Studio 2005 обладает гораздо большими возможностями. Для важных свойств Средства визуализации (Visualizers) предоставляют альтернативный вид объекта или переменной таким способом, который наиболее приемлем для типа данных. предоставляет вид типа всплывающей подсказки во время отладки, который вы можете также изменить.

Visual Studio 2005 обладает четырьмя cредствами визуализации: DataSet, который отображает содержимое DataSet в табличной сетке, и тремя текстовыми cредствами визуализации - один для текста, второй для XML и третий для HTML. Следующее изображение демонстрирует  действие cредства визуализации для XML, который предоставляет более читабельный вид XML-кода, по сравнению с простым умещением его в одну строку.


Что наиболее интересно в cредствах визуализации отладчика Visual Studio 2005, так это то, что их структура является встраиваемой. То есть мы можем создать свое собственное cредство визуализации и встроить его в Visual Studio! В данной статье мы рассмотрим основы cредств визуализации отладчика, исследуем некоторые встроенные средства, рассмотрим парочку бесплатных, а также изучим способ создания своего собственного cредства визуализации отладчика! Читайте далее, чтобы узнать больше об этом!

Основы cредств визуализации

При отладке приложения разработчикам порой необходимо знать значения определенных переменных. Visual Studio предоставляет несколько окон - Watch, Autos, Locals, и т.д., - которые отображают текущие значения различных переменных. Тем не менее, независимо от того, переменную какого типа вы рассматриваете, их значения отображаются одним и тем же способом. Для некоторых типов переменных может существовать более интуитивный способ отображения значений. К примеру, при просмотре значения строки, содержащей код HTML, вместо того, чтобы просто отображать разметку, разработчику скорее будет интересно увидеть обработанную разметку, такую, какую он увидел бы в обозревателе.

Средства визуализации предоставляют более типовой просмотр переменных во время отладки. Также они применимы к определенным типам - к примеру, cредства визуализации для Text, HTML и XML применимы к строковым переменным. При отладке вы можете навести указатель на такой тип в окне с кодом или в окнах Watch, Locals либо Autos и увидите, как появится маленькая иконка увеличительного стекла. При нажатии на него отобразится значение переменной, использующей данное cредства визуализации. (Для типов, которые поддерживают множество cредств визуализации, например строковых, данная иконка сопровождается выпадающим списком, позволяющим выбрать необходимый.)

Чтобы использовать cредства визуализации отладчика, создайте проект в Visual Studio 2005, который обладает несколькими строковыми переменными. Одной присвойте некоторый валидный XML-код; другой присвойте HTML-содержимое; третьей - длинное строковое значение. Далее, установите точку остановки в коде и затем начните отладку. В окне Watch на ссылке к данным трем переменным, содержащим XML, HTML и длинное строковое значение, вы увидите иконку увеличительного стекла справа от значения каждой переменной, как это показано ниже.


Нажатие на иконку увеличительного стекла отобразит выбранное cредство визуализации, а также вы можете выбрать желаемое средство путем нажатия на стрелочку рядом с иконкой. В вводной  части данной статьи я показал вам результат, отображенный cредством визуализации для XML; снизу вы увидите примеры, демонстрирующие cредства визуализации для текста (Text) и разметки HTML.




Анализируем функциональность cредств визуализации отладчика

В общем, cредства визуализации отладчика должны выполнять 2 задачи: во-первых, при получении экземпляра объекта определенного типа они должны создать пользовательский интерфейс, отображающий подробное описание объекта; во-вторых, они должны содержать необходимую связь для взаимодействия с отладчиком в Visual Studio. Сложностью создания cредства визуализации является то, что он работает в 2 различных процессах: в пределах отладчика Visual Studio, а также в запущенной программе. Средствао реализовано в виде сборки, содержащей мета-данные, указывающие определенный тип данных, с которыми должно работать cредство визуализации. Когда разработчик начинает отладку в Visual Studio, среда загружает все cредства визуализации и определяет, с какими типами данных они могут работать. Далее, когда разработчик наводит указатель на переменную в окне с кодом либо в окнах Locals, Autos, и Watch, Visual Studio отображает иконку увеличительного стекла.

Нажатие на иконку заставляет cредство визуализации загрузить данную информацию из программы и передать ее той программе, которая расположена в пределах отладчика и которая отобразит информацию на экране. Данная передача информации из одной части средства  в другую происходит с использованием бинарной сериализации посредством потоков; окончательным результатом будет то, что любые объекты, переданные между данными частями cредства визуализации, должны быть проиндексированы. Как только cредству визуализации, работающему в отладчике, передается объект для отображения, он ответственен за создание пользовательского интерфейса для вывода значения объекта. Это в большинстве случаев подразумевает создание формы (Windows Form) и загрузку значений в элементы управления, основываясь на полученной информации объекта.


Расширяем возможности Studio 2005 при помощи специализированных cредств визуализации

Хотя в Visual Studio есть четыре неплохих встроенных cредства визуализации, вы также можете внедрить свое собственное. Разработчики могут создать свое собственное специализированное cредство визуализации и зарегистрировать его в Visual Studio, где регистрация также проста, как и копирование DLL-файла в определенный каталог.

Вам стоит исследовать некоторые бесплатные cредства визуализации (многие из них также имеют доступный исходный код) :

  • Image Debugger Visualizer - позволяет разработчикам работать с Bitmap-объектами для просмотра изображений в диалоговом окне.
  • Regex Debugger Visualizer - cредство визуализации для работы с регулярными выражениями. Работает с такими типами данных, как String, Regex, Match, и MatchCollection.
  • Control Hierarchy Visualizer - отображает иерархии элементов управления на ASP.NET-странице.
  • XML Visualizer - позволяет просматривать XML документы в графическом формате, а не как разметку.


Создаем специализированное cредство визуализации

Создание специализированного cредства визуализации обычно подразумевает создание трех связанных объектов:

  1. класс cредства визуализации ("visualizer") - когда разработчик нажимает на иконку увеличительного стекла во время сессии отладки, мы должны каким-то образом связать соответствующий объект и отобразить информацию в желаемом формате. Действие получения информации объекта из отладчика и передачи ее в пользовательский интерфейс является ответственностью класса cредства визуализации. Данный класс наследуется от класса DialogDebuggerVisualizer и предоставляет метод Show() , который отвечает за получение информации и вызов пользовательского интерфейса. Данный класс также должен содержать атрибут сборки, обозначающий, что cредство визуализации является подходящего типа данных .
  2. класс источника ("source") - ответственностью класса источника является взятие объекта, чья иконка увеличительного стекла была нажата, и передача данной информации объекта в отладчик. Данный класс наследуется от VisualizerObjectSource и обладает методом GetData(object, Stream), который предоставляет  сериализированную версию объекта классу cредства визуализации. В частности, первым входным параметром метода GetData() является объект, чья иконка увеличительного стекла была нажата; вторым входным параметром является Stream (поток), к которому объект должен быть сериализирован.
  3. пользовательский интерфейс ("user interface") - пользовательский интерфейс, который отобразит информацию. Обычно это подразумевает создание формы (либо нескольких), добавление соответствующих элементов пользовательского интерфейса (TextBoxe, TreeView, и т.д.), а также передачу классом cредства визуализации информации для отображения.
Для того чтобы продемонстрировать данное взаимодействие, я создал достаточно простое cредство визуализации, разработанное для отображения серверных переменных. Данное cредство визуализации ассоциировано с классом System.Web.UI.Page class. (Вы можете загрузить данный класс в конце статьи.)

Давайте рассмотрим исходный класс. Метод GetData() здесь начинается с преобразования первого входного параметра в объект Page и затем сброса значений коллекции Request.ServerVariables в новую NameValueCollection. (Я произвожу данное детальное копирование, поскольку Request.NameValueCollection на самом деле является объектом типа HttpServerVarsCollection, который не является сериализированным, следовательно,  не может быть переслан из исходного класса в класс cредства визуализации. Коллекция NameValueCollection является сериализируемой, тем не менее после сброса содержимого из Request.NameValueCollection в локальную NameValueCollection я затем сериализирую содержимое в поток (Stream), который был передан в качестве второго входного параметра):

public override void GetData(object target, System.IO.Stream outgoingData)
{
    if (target != null && target is Page)
    {
        Page p = (Page)target;

        // Помещаем содержимое из Request.ServerVariables в
        // локальное NameValueCollection b/c Request.ServerVariables
        // не является сериализированным...
        NameValueCollection nvc = new NameValueCollection();
        foreach (string key in p.Request.ServerVariables)
            nvc.Add(key, p.Request.ServerVariables[key]);

        // сериализация nvc в поток outgoingData
        BinaryFormatter formatter = new BinaryFormatter();
        formatter.Serialize(outgoingData, nvc);
    }
}

Далее, в методе Show() класса cредства визуализации мы десериализируем информацию из метода GetData() и создаем пользовательский интерфейс. Это выполняется при помощи данного кода:

protected override void Show(IDialogVisualizerService windowService,
                             IVisualizerObjectProvider objectProvider)
{
    // Десериализация Stream возвращенного GetData() в NameValueCollection
    NameValueCollection vars = null;
    using (Stream dataStream = objectProvider.GetData())
    {
        BinaryFormatter formatter = new BinaryFormatter();
        vars = formatter.Deserialize(dataStream) as NameValueCollection;
    }

    // Создаем форму пользовательского интерфейса,передавая в NameValueCollection
    using (VisualizerForm displayForm = new VisualizerForm())
    {
        displayForm.Visualize(vars);
        windowService.ShowDialog(displayForm);
    }
}

Класс VisualizerForm является Windows Form, содержащей элемент управления ListView. Метод Visualize(NameValueCollection) класса VisualizerForm (написанный мною), берет переданный объект NameValueCollection и сбрасывает его содержимое в ListView.

Также в класс cредства визуализации включен атрибут DebuggerVisualizer, который связывает средство с типом данных System.Web.UI.Page:

[assembly: DebuggerVisualizer(
    typeof(skmVisualizers.ServerVariables.Visualizer),
    typeof(skmVisualizers.ServerVariables.ServerVariablesControlSource),
    Target = typeof(System.Web.UI.Page),
    Description = "Visualize the page's server variables.")]


Применяем и тестируем специализированное cредство визуализации

Как только вы успешно создали свое специализированное cредство визуализации, его можно с легкостью использовать. Просто скопируйте сборку (файл DLL) в My Documents\Visual Studio 2005\Visualizers folder. И это все! Для применения визуализатора откройте Visual Studio 2005, затем создайте новый проект веб-сайта и установите точку остановки в коде. Далее запустите отладчик. Когда вы достигнете точки остановки, введите Page в окно Watch (или this в C# либо Me в VB). Вы должны увидеть маленькую иконку увеличительного стекла в окошке Watch. Нажмите на нее - и вы должны увидеть такое же диалоговое окно, как показано ниже. Если вы выберете определенный пункт из ListView, вам предоставят более подробную информацию.


 
 

Одной из головных болей при разработке cредств визуализации отладчика является их тестирование\отладка. Единственным способом точно узнать то, что у вас полностью корректно работающий отладчик – это создать сборку вашего средства, вручную скопировать его в каталог Visual Studio 2005 Visualizers, запустить VS и начать отладку. Если вы найдете ошибку и захотите выполнить какие-либо изменения, вам необходимо будет остановить отладку, закрыть Visual Studio, сделать изменения в cредстве визуализации, повторно скомпилировать и скопировать файл в каталог Visualizers directory, перезапустить VS и вернуться в отладчик.

Есть другой, более продуктивный способ, позволяющий вам перейти к коду cредства визуализации посредством отладчика. Данная техника подразумевает создание автономного приложения (Console Application). Единственным недостатком является то, что, поскольку вы на самом деле не запустили приложение, вам придется имитировать сериализованный объект из исходного класса, что означает, что вам будет недоступна информация конкретных запросов, которую вы бы получили при реальной отладке. (Это является  большой проблемой при работе с истинными элементами управления ASP.NET, такими как класс Page.)

Вывод

Visual Studio 2005 помогает разработчикам во многом, и даже с отладкой приложений. Новой особенностью Visual Studio 2005 являются cредства визуализации отладчика, которые предоставляют специализированный подход к просмотру определенных типов данных. Visual Studio обладает четырьмя встроенными cредствами визуализации , но вам доступны также множество средств, созданных другими разработчиками. Вы также можете свободно создать свое собственное cредство визуализации. В данной статье мы рассмотрели модель cредства визуализации, а также три из четырех встроенных cредства, несколько общедоступных, и даже рассмотрели способ создания своего собственного cредства визуализации.

Scott Mitchell

Исходный код примеров