Script Debugging with Visual Studio
Imagine we have a web page something like this.
When I run this I expect that I'm going to get three alerts letting me know which iteration I'm on. (Unfortunately, I've got my < and > mixed up so I fall straight out the for loop without a single iteration). However, it's been a long day (or an early start) and I haven't spotted this so I want to see what's going on in my function. Can I set a breakpoint or single step this in Visual Studio? Of course I can (I'd be leading you up the garden path a little if you couldn't). Here's what you need to do:
- Enable script debugging in IE (see image: Tools -> Internet Options -> Advanced)
- Open the html file in Visual Studio
- Set a breakpoint and hit F5 / Start Debugging or hit F10 / F11 to single step
You'll see here that when I hit my breakpoint I get the standard Visual Studio 2005 debugging experience.
I can see the next statement to be executed, I can use DataTips to see my data values, I can step into / over etc etc. So much for local script debugging but what about if I want to debug my Live.com gadget. Well that's slightly more complicated because my gadget is hosted on Live.com (or Start.com). I can't simply hit F5 and expect Visual Studio to spark it up for me so a different approach is called for. Here's what we have to do:
- Get our (local) gadget fired up in Live.com (or on http://gadgets.start.com/gadget.aspx?manifestUrl=\_The\_URL\_To\_My\_Gadget\_Ma_ - see this blog entry)
- Open the web site in Visual Studio and open the .js file for editing
- Set a breakpoint at a suitable place in the .js file (eg in the this.initialize function)
- In Visual Studio go to Debug -> Attach to Process
- Ensure that either Automatic or Script is selected as the type of code to debug (see images below)
- Select the relevant IE process from the available process and click "Attach" (see image below)
- Return to IE and load up the gadet (or reload it) and the breakpoint should fire and you'll drop back into Visual Studio as before
If you want Visual Studio to fire up a different browser when you Start Debugging you can change this be right-clicking on a browsable page in Solution Explorer, and selecting "Browse With". You can also change the default browser here. Don't expec the same debugging experience I've decribed above though in other browsers. Finally, if you want to know more there's a PDC video that's worth watching (TLNL05: Tips & Tricks: Debugging ASP.NET Web Applications and Services by Habib Heydarian).