Debugging JavaScript with MS Visual Studio

There’s an ancient fable that tells of a frog that falls into a pail of milk. Unable to scramble out, the creature trashes around, seemingly drowning. Eventually however, his frantic struggles turn the milk into butter – and he hops away.

Until now, that fable has been a good metaphor of my struggle with the seven headed beast called JavaScript. I’ve written my lines of code, gotten inane script errors from IE, tried, failed and tried again. Also known, and forever hated, as trial and error programming.

Of course, jolly, happy and cheerful memories from BW2 (before Web 2.0) – when I coded Java all day and all night, with the best tools of the trade – didn’t help much either.

So, I felt like the frog. But that was until I discovered that I could debug javascript with Visual Studio. Yes, that’s right – actual debugging in javascript.

I’m not saying this is news, I’m just saying it’s news to me (and probably to a couple of others as well – those weird looking geeks in the corner, there. See them?). And, yes, I am aware of Venkman.

If you’re not a .net developer, it isn’t in-your-face obvious how you do this, so often you rely on someone just showing it to you. I’ve done some screenshots for you guys and gals.

How to do it!

Just visit the webpage you want to debug with IE. Then fire up Visual Studio, and select Tools -> Attach to Process…

Then you find the iexplore.exe instance you want. Click “Attach”.

And voilá! You’re in a full-featured debugger; a script explorer, code-view where you can set breakpoints etc. and a panel where you can add watches and view values of locals.

This is brilliant. Now this JavaScript programming should feel less like thrashing in a pail of milk, and more like enjoying a cup of hot chocolate.

Comments

Comment by Omar on 2006-02-13 23:00:46 +0000

This isn’t really anything new – it’s been around since the inception of VS2k3. The real pain in the ass that comes from this vs/ie’s javascript debugging is the inability to handle multiple threads well … ugh. Just another reason to stay away from scripts.

Comment by Andrew on 2006-09-26 09:34:13 +0000

I’ve started using IE7 and don’t see my favorite “break at next statement” option? Where did it go?

Comment by Mohan on 2007-02-02 08:17:15 +0000

The easiest way to debug javascript in VS2005 is to use the debugger keyword.. Look at my blog at

http://mohansmindstorms.spaces.live.com/Blog/cns!69AE1BEA50F1D0E7!233.entry