Silverlight Spy

I found this GREAT tool for Silverlight developers today called Silverlight Spy.   It’s basically a jazzed-up runtime inspector of running Silverlight applications.  Point it at a web site containing a Silverlight control and it will snoop into the XAP file to read out all the XAML and show you exactly what’s going on.  Here’s a screen shot of Silverlight Spy in action:

(click on the image to see a larger version)

Web Browser

As you can see from the screen cap, there are a LOT of things to look at.  First, in the upper-left quadrant, there is the web browser.  In here you can see the web page you’re inspecting as well as a highlight showing the control objects you have selected from the XAML Explorer on the right (more in that in a minute).  This does NOT use IE’s control – I was told that I needed to install something called the csExWB WebBrowser Control, but I don’t know if it actually installed anything.  I downloaded the installer, but never ran it, but the tool is working somehow – perhaps that is part of the magic of ClickOnce!

XAML Explorer and Property Navigator

The right side is split in a UI style similar to Visual Studio (go figure) where the Silverlight XAML Explorer is on the top – similar to Visual Studio’s Project Explorer – and the selected object’s properties are listed below it.  The XAML Explorer gives you a great view into the Silverlight control – everything from the contents of the XAP file to style definitions, isolated storage and the actual UI elements.  As you drill through the UI section, you can see exactly how the XAML is composed, including information about the styles in place and a neat view of the XAML that was used to create those elements.  Oh – and if there is more than one Silverlight control on a web page, the XAML Explorer will show all of them!  FTW!

Output Window

The last part of this tool is the Output window.  This window shows two different views – the default view is messaging from Silverlight Spy.  That information contains details on the loading and parsing of the XAML document as handled by the web browser.  This can be really useful to debug errors in your application.  The second view is an Events view – this view shows the output of Silverlight Spy tapping into the Silverlight event infrastructure to show you when elements have events triggered, such as MouseOver, MouseLeave, etc.  Another useful tool for figuring out if your events are firing and performing general debugging.

ClickOnce Installer and .NET Reflector

Silverlight Spy is a ClickOnce WPF application – that means that you don’t have to worry about installation and updates – it installs when you run it, and updates automatically each time you run it.  It also supports the .NET Reflector via configuration to supercharge your debugging experience right in the IDE:

Closing Thoughts

So far, after just a little bit of use, I really, really dig this tool.  I know a lot of people jumping on the Silverlight development bandwagon and I know this will be a big help to them, both from a debugging as well as a learning experience.  The integration with Reflector puts this tool totally over the top!  I highly recommend you get out to First Floor’s web site Download Silverlight Spy today!

Technorati Tags: silverlight,tools,debugging