Sometimes, you want to check out how your application is
structured at runtime. All those nested controls and elements can
be hard to visualize when working in code, markup, or designer.
Sometimes you need to see the applied values from styles (this is
one thing I use IE and Firefox dev tools for with HTML/CSS all the
time) Sometimes, you want to just ... er... borrow someone else's
Wait. Why would I ever need a runtime visualizer to figure out
my WPF visual tree. It's pretty simple, right?
So, a tool can definitely be helpful :)
There are three great WPF runtime inspection tools for the community,
by the community. The first is Mole, written and maintained by Karl Shifflett
and Josh Smith. The second is Snoop,
originally written by Pete Blois and later taken over by Cory
Plotts. (as an aside, you can see my MIX10 video interview with Cory on channel9)
The third is one that I didn't know about until recently: Christian Moser's WPF Inspector. As Mole
doesn't currently support .NET 4 or VS2010, we'll cover just Snoop
and Inspector in this post.
Both applications install as ClickOnce WPF apps. Both, if you
get the latest release of Snoop) will handle 32 and 64 bit
applications. Their UI/UX approach is quite different, though, and
both have strong points. When helping Long Zheng with some WPF
challenges in MetroTwit, I relied heavily on Snoop to figure out
what was going on. Let's go back through that app with both
Keep in mind I'm comparing an app in its 2.6 version
(snoop) with an application in beta. Take anything that smells like
a comparison (which would be this entire post) with a grain of
Both had simple and professional installers that ran without
Snoop uses an "always open" toolbar metaphor. WPF Inspector uses
a regular dialog metaphor.
Either UI works for me. I usually open this type of application
for a specific session, then close it afterwards. I also have
multiple monitors including one big 30" display, so I'm good on
screen real-estate. If you have a small screen, UI differences like
this may matter to you.
Snoop provides a process ID which is somewhat helpful if you
have more than one instance running.
TIP: To figure out your app's process id, open task manager
(taskmgr) and look at the process tab. While doing that, move your
app around the window using the mouse. The instance with the raised
CPU usage is the app you're using.
- WPF Inspector identified Snoop and MetroTwit, but didn't
identify Visual Studio
- Snoop identified WPF Inspector, MetroTwit and Visual
Now, I can't think of any reason why I'd want to snoop/inspect
Visual Studio, but the minor difference is there. One minor but
nice difference is that WPF Inspector identifies newly opened apps,
whereas Snoop requires you to hit the refresh button.
First Inspection/Snoop Screen
Where do you land once you pick an application?
When you select an app using WPF Inspector, you are presented
with this screen:
The white-on-gray button in the dialog needs to change :)
Do the same in Snoop, and you get this screen (I expanded the
tree a little)
Now, WPF Inspector didn't give me any info on the application.
It may be due to the window structure of the MetroTwit app (it's
doing some cool things to get the drop shadow, more on that in
another post), but snoop was able to pick it up.
Snoop has a UI feature I find annoying. I guess it could be
useful to some, but when you have multi-monitor it's a bit of a
pain: when you click the application, the snoop UI is brought up
with it. The snoop icon in the taskbar applies only to the snoop
toolbar, not the UI. I'd prefer Snoop to behave like a normal
Similarly, WPF Inspector shows no icon in the taskbar. It's easy
to lose the app, as it doesn't appear when I focus the application
either. Again, perhaps just the result of the app I picked.
In both cases, I want a separate taskbar
Visualization Take 2 - Switching Apps
So, given what I ran into with the other apps, I decided to
switch apps. I'll talk with Christian to see what was up with WPF
I cracked open Expression Blend 4 and got WPF Inspector to show
me some goodness (tree manually expanded here too):
Both applications have great tooltip hover goodness, showing a
preview of what is in that node of the tree. Love it. Look closely
at the WPF Inspector. You can see Snoop in there. It's pretty
interesting to be inspecting snoop snooping the app your
inspecting. Pretty sure that will cause a wormhole to open sooner
NOTE: I closed WPF Inspector during this post and re-opened it.
It could no longer find the elements in Blend, so there's
definitely some things going on in there. It's beta, after-all.
It's also interesting that when you hover over one or the
other's tree, WPF Inspector shows a "PopupRoot" coming in and out
of the tree, indicating a popup control. The WPF inspector is
dynamic, the Snoop inspector is static, based on a snapshot of the
Static vs. Dynamic UI
The WPF inspector is always showing the UI as it exists in that
point in time. Snoop takes a snapshot at the beginning. That means
for a complex dynamic app, you'll need to refresh snoop.
This sounds like a point in WPF Inspector's favor, and it can
be. However, when inspecting something like MetroTwit, where the UI
is being rebuilt on a regular basis as new tweets come in, I
imagine this could be pretty frustrating. I wasn't able to test
this scenario in WPF Inspector as it wouldn't inspect MetroTwit, so
I'm working on assumption here.
Snoop does show changes in property names, just not changes to
the visual tree without a refresh.
Both apps provide a good view of the visual tree. One thing I
like about WPF Inspector, is it will also show you the logical
tree, a much trimmer view which helps you avoid that monstrosity of
a tree I opened with.
Blocking vs. Non-Blocking
Snoop has its UI blocked when the Blend dialogs were open. WPF
inspector remained available. I believe this has to do with how
Snoop injects itself into the tree of the process you're
What does that mean? Well, at least when working with Blend, I
couldn't use the Snoop UI when Blend had a modal dialog up. Most of
the time that's not a big deal...unless you want to inspect a
Modifying Values at Runtime
Now the best part. This looks pretty promising in WPF Inspector:
changing values in real time.
WPF inspector let me change the values of elements in real time.
I made the menus in Blend Green, for example:
(and yes, I changed the app title. Feel the power!! Muah
One thing I don't like about the property inspector, however, is
how it sometimes disappears when you move focus to another
application (such as when writing a blog post). Maybe not an issue
during normal usage.
Snoop has support for setting breakpoints on properties. I've
never used this function.
Keyboard and Mouse Selection
Snoop also allows you to see what items are focused with the
keyboard or mouse. This makes it easy to navigate around the visual
tree by clicking on items in the application.
I didn't get to try it out, but WPF Inspector will let you
select elements by mouse hover. Also a time saver.
The rules / errors pane in WPF Inspector is also nice. Time will
tell how useful this is in real applications, but it looks
This is one place where Snoop shines. Snoop has a nifty 3d
visualizer that lets you see the full UI in a blown-out 3d mode. If
you have lots of panels and need to visualize the z-order, this is
really helpful. If not, it's just cool eye candy :)
I don't use the Snoop zoomer often, but it has made life
marginally easier for me on some past projects.
I don't think you can go wrong with either of these applications
for your own projects.
WPF Inspector is looking to be another great application. It has
some real strengths. If Christian takes care of the issue finding
apps and inspecting them, it could be the next big thing for WPF
developers. This may only be an issue with special-case
applications anyway, but it's a consideration.
Snoop is still awesome for inspecting apps. It identifies more
applications that WPF Inspector and has the 3d visualization mode,
which really helps you understand the layering of a complex app.
It's also stable and has no issues with apps after launch. I'm sure
WPF Inspector will get there, but it's not quite there yet.
Oh, and unless you like your CPU being torn up, don't run both
visualizers at the same time. Individually, they had little to no
CPU impact. Together, they were causing Blend to hit 50-75%