Script Debugging with Visual Studio

Article
01/13/2006

First off, let me say that you have lots of different options when it comes to script debugging. Here I'm going to describe how to debug script running in IE using Visual Studio. And specifically, how you can use Visual Studio to help you debug the JavaScript in your live.com gadget.

Imagine we have a web page something like this.

 <head>
    
    <script type="text/javascript">
    
    function DoSomeStuff(NumIterations)
    {
        for (var i=0; i>NumIterations; i++)
        {
            alert("Iteration: " + i);
        }
    }
    
    </script>
    
</head>
<body>

    <input id="Button1" type="button" onclick="DoSomeStuff(3)" value="Press Me" />

</body>
</html>

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 https://gadgets.start.com/gadget.aspx?manifestUrl=\_The\_URL\_To\_My\_Gadget\_Manifest\_ - 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

The only downside here is that you'll find yourself in and out of the "Attach to process" dialogue quite a lot but I think you'll agree this is a very powerful capability. Again you can step into / over, take advantage of DataTips, Watches etc. I was blown away the first time I found myself single stepping through the JavaScript in my gadget!

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).

Script Debugging with Visual Studio

Additional resources