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.

Welcome!

Hey all! Welcome to my flipping sweet blog. Here you will find me jabbering about all manner of stuff and junk, but mainly flash development. Currently I work at Terralever developing interactive applications. Big love to the TL family!

So today comes the announcement of the new Adobe Flash CS3! Right now the site is getting hammered, and there is no expected launch date. But it is nice to see a listing of new features. Integration into the Adobe family is going to make life a lot easier for everyone.

I really like that they aren't shy about the prospect of using flash as a video tool:

Adobe After Effects integration

Export individual layers with transparency using the new QuickTime exporter, and import them into After Effects for advanced manipulation. Import FLV directly from After Effects.

Some things are just ridiculously simple to do in Flash that would require too much time in After Effects. I could've really used this feature in the past on dvd projects, and I'm sure it will come in handy!

Well, it'll probably take a couple blog entries before I get into a good cadence. Stay tuned, as I'll be posting little demos, source code, and giving my opinionated opinions to anyone who'll read :P.