Click here to monitor SSC
  • Av rating:
  • Total votes: 10
  • Total comments: 5
Amirthalingam Prasanna

Debugger visualizers

05 September 2005

Debugging in Visual Studio.NET 2005

Debugging is an important process for any level of programming to ensure programs function as expected. Most productive developer environments provide tools and utilities to assist with the debugging process. Visual Studio.NET 2005 is equipped with a number of debugger visualizers, but users can also create their own based on an individual project.

What are debugger visualizers?

Debugger visualizers are customizable visual tools that show the value of a particular object or variable during the debug process. When you hit a breakpoint in Visual Studio.NET 2005 or look through your source code, for example, you can hover the mouse over a variable or use the watch window to see the variable’s value.

In the figure below, the variable str holds the string "Hello Simple-Talk."

Figure 1

The above debugger code display is sufficient for a simple string value. But if the string value is complex with more meaning – such as an XML fragment – or if the value is not of a string type, debugger visualizers become very useful.

Generally if while debugging you try to view the value of an XML fragment represented as a string, the developer environment will output the string representation as shown below:

Figure 2

The above representation of the XML fragment as a normal string value might not be desirable, especially when debugging a very large XML fragment. A better solution would be displaying the XML fragment as nodes. This is the function of the XML debugger visualizer in Visual Studio.NET 2005. You can invoke the XML debugger visualizer by clicking on the drop-down menu item with the magnifying glass icon shown in the simple string display of the variable, then selecting the XML visualizer option.

Figure 3

The above XML debugger visualizer displays the string variable as nodes, which is easier to comprehend.

Creating a custom debugger visualizer

The Visual Studio.NET IDE enables you to create custom debugger visualizers. If you are debugging code and want to see the value of a variable containing an image, for example, the following string representation of the image properties will be shown:

Figure 4

Notice there is no magnifying glass icon available, indicating there are no debugger visualizers available to see an image object. You can create a simple image visualizer that will show the actual image rather than the string values of the image properties.

First, create a new class library project in Visual Studio.NET 2005 named ImageDebuggerVisualizer and rename the Class1 to ImageVisualizer. Add a new Windows form named FrmImage to the project, and add a Picture Box named PicViewer to the form. Add the following property code to FrmImage to indicate which image to display in PicViewer:

C# Code

public Image Picture
{
get { return PicViewer.Image; }
set
{
PicViewer.Image = value;
PicViewer.SizeMode = PictureBoxSizeMode.Zoom;
}
}

Next modify the code of the ImageVisualizer class as follows:

C# Code

class ImageVisualizer : Microsoft.VisualStudio.
DebuggerVisualizers.DialogDebuggerVisualizer
{
protected override void Show (Microsoft.VisualStudio.
DebuggerVisualizers.IDialogVisualizerService windowService,
Microsoft.VisualStudio.DebuggerVisualizers.
IVisualizerObjectProvider objectProvider)
{
FrmImage frm = new FrmImage();
Image img = objectProvider.GetObject() as Image;
frm.Picture = img;
frm.ShowDialog();
}
}

All debugger visualizers must inherit data from the DialogDebuggerVisualizer and override the Show method. The IVisualizerObjectProvider interface provides the GetObject method to retrieve the debugged object. In this instance we retrieve the image being debugged, and we set it to the Picture property of our form so it will be displayed in the PictureBox.

Next we need to provide details about the debugger visualizer we created in the assembly so that Visual Studio.NET 2005 IDE can identify it. Open up the AssemblyInfo.cs file and add the following code to it:

C# Code

[assembly: System.Diagnostics.DebuggerVisualizer(
typeof(ImageDebuggerVisualizer.ImageVisualizer),
Target = typeof(System.Drawing.Image),
Description = "My Image Visualizer")]

The above DebuggerVisualizer attribute specifies the type of created debugger visualizer and the type of objects – in this case Image – for which we can use it. We have also provided a description to identify our visualizer in the IDE.

The final step is deploying the newly created debugger visualizer. The image visualizer we created can be deployed either for the current logged-in user or for all users. To deploy the visualizer for the current user, copy the compiled dll into the My Documents/Visual Studio/Visualizers folder. For all users' deployment, copy the compiled dll into the <VS.NET 2005 InstallDir>/Common7/Packages/Debugger/Visualizers folder.

Now when you debug and come across an image variable, you will see the familiar magnifying glass icon indicating there are debugger visualizers available for the image. Click on the icon and the newly created "My Image Visualizer" appears. Clicking on the visualizer will show the image being debugged within the Windows form we created.

Figure 5

When using a debugger visualizer, the object being debugged will be serialized so it can be sent from the IDE to the debugger visualizer. Therefore the object for which you are writing the debugger visualizer should be serializable.

The ability to debug code is an important step in programming, regardless of your skills or the tools you have available. Debugger visualizers enhance the debugging process by providing ways to create your own debugger visualizers. You can create debugger visualizers to visualize anything from simple strings to complex datasets and images.

Amirthalingam Prasanna

Author profile:

Prasanna is a software engineer, technical author and trainer with many years of development and consulting experience in the software development industry. He is a Microsoft MVP in the Visual developer category, and a MCPD on enterprise application development. He has authored many articles and has worked on content creation for many Microsoft certification exams and courses. He is also a frequent speaker at Microsoft technology conferences and events. You can read his blog at www.prasanna.ws and e-mail him at feedback@prasanna.ws

Search for other articles by Amirthalingam Prasanna

Rate this article:   Avg rating: from a total of 10 votes.


Poor

OK

Good

Great

Must read
Have Your Say
Do you have an opinion on this article? Then add your comment below:
You must be logged in to post to this forum

Click here to log in.


Subject: Missing pictures in article
Posted by: Anonymous (not signed in)
Posted on: Sunday, May 06, 2007 at 10:17 AM
Message: Very usefull article, BUT some of the images are missing!

Subject: Images are here
Posted by: Anonymous-TX (not signed in)
Posted on: Friday, June 01, 2007 at 12:28 PM
Message: The images are all there but the two "missing" images' URLs were hard-coded to a particular IP that has obviously changed since the article was published.

Working links for the two "missing" images:

http://www.simple-talk.com/iwritefor/articlefiles/223-image3.gif

http://www.simple-talk.com/iwritefor/articlefiles/223-image4.gif


Nice article, BTW. :)

Subject: We do not need property at all to do this here is my code
Posted by: Anonymous (not signed in)
Posted on: Wednesday, April 02, 2008 at 11:18 AM
Message: public class ImgDebugVisual :DialogDebuggerVisualizer
{
FrmImage frmimage = new FrmImage();
//public Image Picture
//{
// get
// {
// return frmimage.pictureBox1.Image;
// }
// set
// {
// frmimage.pictureBox1.Image = value;
// frmimage.pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
// }
//}

protected override void Show(IDialogVisualizerService windowService, IVisualizerObjectProvider objectProvider)
{
Image img = objectProvider.GetObject() as Image;
frmimage.pictureBox1.Image = img;
frmimage.ShowDialog();
}
}

Subject: Still no images
Posted by: robvon (view profile)
Posted on: Thursday, November 13, 2008 at 8:22 PM
Message:
Yup, No Images (some) and its almost end of 2008..

Lets try that again

No Images...

Ok now we have your attention.....

Subject: Images revealed!
Posted by: Chris Massey (view profile)
Posted on: Monday, November 17, 2008 at 9:54 AM
Message: There was a typo in the image references - I've corrected and tested it, so you should now see all of Prasanna's images.

 

Top Rated

Acceptance Testing with FitNesse: Multiplicities and Comparisons
 FitNesse is one of the most popular tools for unit testing since it is designed with a Wiki-style... Read more...

Acceptance Testing with FitNesse: Symbols, Variables and Code-behind Styles
 Although FitNesse can be used as a generic automated testing tool for both applications and databases,... Read more...

Acceptance Testing with FitNesse: Documentation and Infrastructure
 FitNesse is a popular general-purpose wiki-based framework for writing acceptance tests for software... Read more...

TortoiseSVN and Subversion Cookbook Part 11: Subversion and Oracle
 It is only recently that the tools have existed to make source-control easy for database developers.... Read more...

TortoiseSVN and Subversion Cookbook Part 10: Extending the reach of Subversion
 Subversion provides a good way of source-controlling a database, but many operations are best done from... Read more...

Most Viewed

A Complete URL Rewriting Solution for ASP.NET 2.0
 Ever wondered whether it's possible to create neater URLS, free of bulky Query String parameters?... Read more...

Visual Studio Setup - projects and custom actions
 This article describes the kinds of custom actions that can be used in your Visual Studio setup project. Read more...

.NET Application Architecture: the Data Access Layer
 Find out how to design a robust data access layer for your .NET applications. Read more...

Calling Cross Domain Web Services in AJAX
 The latest craze for mashups involves making cross-domain calls to Web Services from APIs made publicly... Read more...

Web Parts in ASP.NET 2.0
 Most Web Parts implementations allow users to create a single portal page where they can personalize... Read more...

Why Join

Over 400,000 Microsoft professionals subscribe to the Simple-Talk technical journal. Join today, it's fast, simple, free and secure.