Code debugging is one of the most important parts of any development life cycle because it gives you the technique to find the problem and how to resolve it. When we talk about the visual debugging Visual Studio has tremendous potential in the term visual debugging features in the form of DataTips. DataTips tool provide a handy way to view information about your variables in visual studio during debugging only. In old versions of Visual Studio DataTips were limited in the amount of the information they could display. Now in Visual Studio particularly after VS2005 DataTips have been enhanced to give more detail information about the simple and complex variables. By the help of DataTips tool programmer easily visualize different variable data types in their Visualizers.
Visualizer is a new component in Visual Studio debugger user interface that give us a completely new way to view the structure of object or variable in a meaningful way. The first question that comes in your mind is what is actually Visualizer is all about and simple answer of this question is “it’s a dialog box or other interface to display appropriate types in a meaningful way.” Default Visual Studio debugger comes with four standards visulaizers and these are following
Dataset visualizer (Dataset, DataTable and DataView objects.)
When a debugger variable show a magnifying glass icon on the variable so it’s mean it has an appropriate visualizer.
In the preceding figure Visual Studio debugger show a DataTable Visualizer when you click the magnifying glass icon debugger show datatable visualizer.
In the following image I want to show image loading in the picture box in debug mode.
In the above image Visual Studio debugger not able to load image visualizer because there is no visualizer is available.
Ok this is an over view of very high level story and now I am going to write custom Image visualizer. Please follow the following steps.
1. Create a Class Library project in Visual C#.
2. Name it “VisualDebugger”.
3. Add following Assemblies References.
4. Rename the class1 to ImageDebugger.cs
5. Copy the following codes.
Target = typeof(System.Drawing.Image),
Description = "Image Visualizer")]
public class ImageDebugger : Microsoft.VisualStudio.DebuggerVisualizers.DialogDebuggerVisualizer
protected override void Show(Microsoft.VisualStudio.DebuggerVisualizers.IDialogVisualizerService windowService, Microsoft.VisualStudio.DebuggerVisualizers.IVisualizerObjectProvider objectProvider)
System.Drawing.Image image = (Image)objectProvider.GetObject();
Form frm = new Form();
frm.Text = "Custom Visualizer - " + image.HorizontalResolution.ToString() + " " + image.VerticalResolution.ToString();
frm.Width = image.Width;
frm.Height = image.Height;
PictureBox pic = new PictureBox();
pic.Image = image;
pic.SizeMode = PictureBoxSizeMode.AutoSize;
Class should be inherited from Microsoft.VisualStudio.DebuggerVisualizers.DialogDebuggerVisualizer and overrider the Show() method of DialogDebuggerVisualizer class to display your custom interface. The next most important and vital part of this visualizer is IVisualizerObjectProvider parameter because you going to caste this interface into apporipate type and in my case it is System.Drawing.Image class(it could be any thing like XML document, your specific class). I used System.Windows.Form class to host my picture box control. One thing that you should keep in mind is apply DebuggerVisualizerAttribute on your class.
First parameter is your custom class, Second parameter is your visualizer source, Third parameter is target object type like XML Document and last is the description of visualizer.
Deployment of Visualizer
Copy the DLL to either of the following locations:
Install path\Microsoft Visual Studio 9\Common7\Packages\Debugger\Visualizers\
My Documents\Visual Studio 2008\Visualizers\
1. Create a new application of Windows Forms Application
2. Give it name
3. And write the following code.
Image img = Image.FromFile(@"C:\Documents and Settings\sullah\My Documents\My Pictures\ozzie1.jpg");
PictureBox pic = new PictureBox();
pic.Image = img;
4. Set the Breakpoint on pic.Image = img;
Following are the outputs.
You can clearly see the new Image Visualizer in the preceding image and click on the magnifying glass icon and get output.