Debugging WPF/e in Firefox

I'm playing around with WPF/e and still haven't written a lick of code on it yet. Still learning about how to handle asynchronous events, using XAML with JavaScript, and how to piece it all together. But I did find something pretty cool already for those of you who are, like me, Firefox users.

Firefox has a full-on javascript debugger, originally called 'Venkman' that you can use to debug your javascript. And while its known as the 'Javascript Debugger' in the menu, I'm going to call it Venkman because that sounds way cooler. And since WPF/e is actually executed using Firefox's javascript engine, that means Venkman will debug your WPF/e application.

And by 'debugging' I don't mean 'crap that didn't work, I'll echo a bunch of junk to the command line' debugging. I'm talking full-on, hot javascript on javascript action. I'm not kidding, because the debugger is actually written in javascript!

Venkman supports breakpoints, variable watching, expression evaluation, profiling, and more. It is an industrial strength tool, and its actually sort of intimidating to me, because I'm more from the 'echo a bunch of junk to the command line' school.

And so how do you use this tool with your WPF/e application?

First install Venkman, which installs quite easily as a Firefox extension.

Next restart Firefox, and open the 'Javascript Debugger'. There you are. Easy, wasn't it?

As an example debugging session, let's debug the 'Sprawl' game. Open Venkman. In a tab, open up the following url:

http://channel9.msdn.com/playground/wpfe/sprawl/default.html

Click on the 'Open Windows' tab to display a list of open windows. Expand Browser Window->default.html and you'll see a list of all the javascript files used within the game. Double click on 'hex.js' and you'll see the actual javascript for each tile within the game. To the left of the line numbers you'll see dashes next to lines that have code on them. Click in this space on line 3 in order to add a 'breakpoint' to the line. You should now see a white 'B' against a red background.

Now refresh the browser. This can take a WHILE, because the debugged javascript takes longer to execute. Start a game. After entering your name and clicking 'Ok' you'll notice that the application stops, and the debugger breaks at line 3 in the hex.js file. Click the 'Continue' button a bunch. You'll notice that every time you click on the button, another tile is created.

This is probably amusing for about 30 seconds, and then you'll probably want to move on without pressing continue another 100 times. Clicking once on your break point will change it to an 'F' against an orange breakpoint. This means its a future breakpoint, and it will stop again if the app is debugged again. Clicking twice clears the breakpoint entirely. Do so, and then press 'Continue' to progress through the application as normal.

This is a really great debugger but unfortunately there seem to be a few hiccups. The worst is that when you close the debugger, you cannot re-open it. Worse still, if you try to re-open it, it will hang a process, and you'll have to manually kill firefox.exe in your Task Manager. Lastly, the time it takes to load up a WPF/e project is way too long. But considering I'm learning the platform, right now I'm just using it to step through applications and see how others do it.