Δημιουργία Custom Debugger Visualizer

Ένα από τα σπουδαία βοηθήματα στο IDE του Visual Studio 2005 είναι οι Debugger Visualizers. Οι Debugger Visualizers παρέχουν οπτική αναπαράσταση κατά το debugging για μεταβλητές των οποίων είναι δύσκολο να δούμε τα περιεχόμενα. Για παράδειγμα, μπορεί κάποιος να δει τα XML περιεχόμενα από ένα XML string σε ένα νέο παράθυρο που επιτρέπει να εμφανιστεί ολόκληρο το string και όχι ένα τμήμα του όπως όταν κάνουμε hover με το ποντίκι.

Το Visual Studio 2005 έρχεται με μερικούς έτοιμους visualizers ωστόσο μας επιτρέπει να δημιουργήσουμε εύκολα και δικούς μας. Ας δούμε πώς…

Ο στόχος είναι να φτιάξουμε ένα visualizer ο οποίος να μας δείχνει τα περιεχόμενα μεταβλητών τύπου System.Drawing.Bitmap (ας πούμε φτιάχνουμε μια εφαρμογή που κάνει επεξεργασία σε images).

Στη C# υπάρχει έτοιμο template με κώδικα, ωστόσο στη VB.NET έχουμε λίγο παραπάνω κόπο. Αρχικά φτιάχνουμε ένα Class Library project το ονομάζουμε CustomVisualizer και αλλάζουμε το Class1.vb σε BitmapVisualizer.vb. Κατόπιν, προσθέτουμε μια φόρμα που την ονομάζουμε Viewer. Επίσης, προσθέτουμε στα References το Microsoft.VisualStudio.DebuggerVisualizers dll.

Ας ξεκινήσουμε από τα εύκολα, τη φόρμα. Αλλάζουμε το FormBorder Style σε FixedToolWindow και προσθέτουμε ένα PictureBox του οποίου θέτουμε Dock = Fill.

Προσθέτουμε τον παρακάτω constructor στην φόρμα:

   Sub New(ByVal BebuggerImage As System.Drawing.Bitmap)

        ' This call is required by the Windows Form Designer.
        InitializeComponent()

        ' Add any initialization after the InitializeComponent() call.
        Me.ClientSize = New System.Drawing.Size(BebuggerImage.Size.Width, BebuggerImage.Size.Height)
        PictureBox1.Image = BebuggerImage
    End Sub

Πρόκειται για έναν constructor μέσω του οποίου θα κάνουμε πάσα στην φόρμα το object που θέλουμε να δούμε.

Πλέον ήρθε η ώρα για τον Visualizer. Αρχικά προσθέτουμε το παρακάτω attribute:

<Assembly: DebuggerVisualizer(GetType(BitmapVisualizer), _
  GetType(Microsoft.VisualStudio.DebuggerVisualizers.VisualizerObjectSource), _
  Description:="Bitmap Visualizer", Target:=GetType(System.Drawing.Bitmap))>

Η αρχιτεκτονική του Debugger Visualizer αποτελείται από δύο τμήματα. Το πρώτο είναι  το "debugger" που τρέχει στο debugger του VS και η δουλειά του είναι να υλοποιεί το UI του visualizer. Το δεύτερο είναι το "debuggee" που τρέχει στο process που κάνουμε debug και η δουλειά του είναι να στέλνει στο "debugger" τα data που θέλουμε να δούμε με την φόρμα που φτιάξαμε. Ουσιαστικά, με το παραπάνω Attribute συνδέουμε το "debugger" τμήμα με το "debuggee". Στην παράμετρο Description δίνουμε το όνομα που θέλουμε να βλέπουμε για τον visualizer στο IDE του VS. Στο Target του λέμε τι τύπο θέλουμε να κάνουμε visualize.

O κώδικας της κλάσης BitmapVisualizer είναι πολύ απλός:

       Inherits Microsoft.VisualStudio.DebuggerVisualizers.DialogDebuggerVisualizer

    Protected Overrides Sub Show(ByVal windowService As Microsoft.VisualStudio.DebuggerVisualizers.IDialogVisualizerService, ByVal objectProvider As Microsoft.VisualStudio.DebuggerVisualizers.IVisualizerObjectProvider)
        Dim img = CType(objectProvider.GetObject, System.Drawing.Bitmap)
        Using v As Viewer = New Viewer(img)
            windowService.ShowDialog(v)
        End Using
    End Sub

Κάνουμε δύο δουλειές. Η πρώτη είναι να διαβάσουμε τα data του object που θέλουμε να δούμε. Αυτήν την πληροφορία μας τη δίνει ο objectProvider με τη μέθοδο GetData και εμείς το μόνο που έχουμε να κάνουμε είναι να τη μετατρέψουμε στον κατάλληλο τύπο, στην περίπτωσή μας System.Drawing.Bitmap. Η δεύτερη είναι να εμφανίσουμε τη φόρμα που φτιάξαμε δίνοντας ως παράμετρο τα data που μόλις μετατρέψαμε. Εδώ, δεν μπορούμε να εμφανίσουμε τη φόρμα όπως κάνουμε συνήθως στις Windows Forms εφαρμογές. Είπαμε ότι αυτό είναι δουλειά του "debugger" τμήματος και η πρόσβαση σε αυτό γίνεται μέσω του windowService.

Αυτό ήταν! Κάνουμε compile το Project και τοποθετούμε το dll στο My Documents\Visual Studio\Visualizers ή στο C:\Program Files\Microsoft Visual Studio 8\Common7\Packages\Debugger\Visualizers

Για να δοκιμάσουμε το αποτέλεσμα, δημιουργούμε ένα νέο Project με κώδικα σαν τον παρακάτω:

   Dim img As System.Drawing.Bitmap
img = System.Drawing.Bitmap.FromFile("Soap Bubbles.bmp")
PictureBox1.Image = img

Βάζουμε ένα break-point στο PictureBox1.Image = …  και όταν μπει σε debug mode και φτάσει στο statement, κάνουμε hover το ποντίκι πάνω από τo object img και με κλικ στον μεγεθυντικό φακό, εμφανίζεται η φόρμα μας με τα περιεχόμενα του object!

Τέλος, ο objectProvider μας επιτρέπει όχι μόνο να δείξουμε τα data αλλά να τα επιστρέψουμε πίσω αλλαγμένα μέσω της ReplaceObject. Επίσης, στην περίπτωση που έχουμε δικούς μας τύπους, μπορούμε να τους κάνουμε serialize και deserialize μιας και υπάρχουν αντίστοιχα οι GetData και ReplaceData που παίρνουν ως παράμετρο stream.