1. Introduction to Debug Visualizer

Debug Visualizers are visual studio IDE’s debugging component. These items show the variables and class objects in useful form so that it can be well visualized. Say; for example, you have class ABC to store the “Passport Size” photo of a person and using the visualizer you can see the photo of the person while debugging the object of ABC. In this example, we will create our own visualizer to see the C# Stack data structure. You can use the technique told here with any objects. The below video shows the existing visualizer for the string.

---

Video 1: Visualizer for String

---

2. About This Stack Debug Visualizer Example

We split the Example as two parts. One is a Class Library project called VisualStack which we can open via visualStack.sln. Another project is a Stack & Queue Example, which you can see in this Link=> Stack & Queue Example. The class library project is the one we will use to create the Custom Debug Visualizer for the Dot.net Stack Object.  Once the project is ready, we deploy visualizer. One can now invoke the visualizer for any Stack object. Visual studio IDE now knows how to visualize the Stack object through the deployed class library project.

Have a look at the below screenshot:

The Item marked as 1 show five elements pushed into the

Stack

object of the Dot Net Framework. Item marked as two shows the Visual studio debugger showing the Visualizer written by us. If we write multiple visualizers for the same

Stack

object, C# debugger lists them all here. Moreover, we can mention the default one by placing the check mark. Clicking the lens icon invokes that default visualizer. The item marked as three shows the simple debug visualizer for C# Stack which lists all the current items in the stack. Left is the Top of the Stack and right is the bottom of it.

3. Create C# Class Library Project For Visualizer

Follow the below steps to set up the project (or) watch the video in this section end.

Step 1

First, we create a C# Class Library project. Later, we will deploy this project to Visual Studio 2005 IDE Runtime so that the IDE knows a visualizer exists for System.Collections.Stack. Below screen-shot shows the Project creation steps:

Step 2

After making the project, we add dot.net assembly reference to it. We need it to build our own Visual Studio Debug Visualizer. The screen-shot below shows adding the needed reference –

Microsoft.VisualStudio.DebuggerVisualizers

.

Step 3

After linking the reference to the class library project, we add a form to the Project and name the file as StackView.cs. The debugger will call this form when the user clicks the drop-down arrow for

C# Stack

in it. The below screen-shot shows this step:

---

Video 2: Starting Class Library Project For Our Stack Debug Visualizer

---

4. C# DebuggerVisualizer Attribute

In the past step, we created a class library project. Now we will set the

DebuggerVisualizer

attribute to our class library and note that we must set the

DebuggerVisualizer

 attribute at the assembly level. First, we will use the needed name-spaces as shown in the below code:

The namespace ‘

Microsoft.VisualStudio.DebuggerVisualizers

’ is used to access the

DialogDebuggerVisualizer

which we will see soon. The ‘

System.Diagnostics

’ namespace is used to have access to

DebuggerVisualizer

Attribute. Finally, to use the Stack, this class library project uses the System.Collection namespace.

After adding the needed name-spaces, we set the visualizer attribute to the class library project. We set it at assembly level by making use of the

assembly:<attribute>

notation. The code for the attribute is below:

To have a better understanding of the above attribute, have a look at the below picture:

The attribute shown in the above picture is by-parted and read as below:

1: The Debug Visualizer attribute set at the assembly level.
2: The class used as the Custom debug visualizer. In our case, StackVisualizer class takes the duty of rendering the Stack object.
3: The bridge between Visualizer and object that needs to be visualized. In our case, it is a Bridge between Stack and StackVisualizer.
4: The C# class that we want to show visually. In our case, we want to write custom debug visualizer for C# Stack object.
5: Description string that pops up in the debug window under the lens icon.

5. Set-Up Visualizer Form

In section three, we already added a form to the class library project. Now we open that form and add a text box control to it. Next, we set the multi-line property to true and provide proper docking and anchor property to occupy the entire area of the form, even when the form is resized. The form is below:

The video below shows setting up the form with the multi-line box control in it:

---

Video 3: Setup the Debug Visualizer Form

---

After the form design, we will write SetStack public function in the code editor for the form file. This function takes the Stack object and displays it in the multi-line text box control. Next, we extract the

IEnumerable

from the stack object and iterate through the

foreach

construct. The code for that is below:

6. Display Debug Visualizer Form For C# Stack

6.1 Inherit From DialogDebuggerVisualizer

Inherit the default class given by the class library project from

DialogDebuggerVisualizer

. Now our class has the behaviour of the Debug Visualizer. The code is below:

6.2 Override DialogDebuggerVisualizer::Show

Next we override the

Show()

method of the

DialogDebuggerVisualizer

. The parameter

IDialogVisualizerService

is used to display the dialog. In our case it is a windows form which we developed in the previous step. The second parameter

IVisualizerObjectProvider

supplies the target object for which we are writing the custom debug visualizer. In our case, the second parameter supplies the Stack object from the debug session. The function signature is below:

6.3 Display The Visualizer

The stack object from the debug session is taken from the

objectprovider

and stored in a reference called stack. The form created in section 5 of this article is instantiated and stored in the reference frm. The

Stack

object from debug session is supplied to the visualizer form by calling the SetStack method, and we know that the SetStack method iterates through the stack content and displays that in the multi-line textbox. Once all is ready, we show the form to the debugging user by calling

ShowDialog()

method of the

IDialogVisualizerService

. The Code is below:

7. Deploy Custom Debug Visualizer For Visual Studio

After writing the code for the class library project (i.e.) our custom visualizer project, we build the project to create the DLL output. Then we will deploy it to the Debug Visualizer folder of the Microsoft Visual studio install location. The below screenshot shows the location in which the debugger to be copied. The yellow marked DLLs are existing ones and blue marked one is the custom debug visualizer which we created. Once the copy is over, we must restart all the visual studio instances (if it is already running). After the restart, you can see Visual Studio Debugger invoking our custom visualizer for ‘

System.Collections.Stack

’.

---

Video 4: Deploying and using Debug Visualizer For C# Stack

Note: The video shows download sample from our previous site MstechArticles.com. The site was closed. You can write your own stack example or you read the article here.

Source Code: Download Custom Debug Visualizer for C# Stack From Google Drive

• C# Debugger Attributes Explained
• Get Table Schema Information Using Ado.Net

Categories: C#

Tags: Debug Visualizer, DebuggerVisualizer attribute, DialogDebuggerVisualizer, IDialogVisualizerService, IVisualizerObjectProvider, Microsoft.VisualStudio.DebuggerVisualizers

This site uses Akismet to reduce spam. Learn how your comment data is processed.