Monday, September 1, 2008

Debug Any JavaScript In Your Browser With Visual Studio

What's Actually In This Page?

Web pages are getting pretty complex these days. What used to be your plain old HTML page could now reference multiple CSS files, have globs of XML embedded in it AND reference multiple JavaScript files which could be doing things like extending the DOM and DHTMLing a lot of markup into the document.

So how does one keep track of all this stuff? How does one even begin to put it all together?

While I don't have an easy answer to these immediate questions above I do have a good tip for dealing with JavaScript. Not only can you use Visual Studio and other debuggers to debug JavaScript, but you can also use the Visual Studio Script Explorer to step into any JavaScripts emitted in the page. That includes those from a WebResource.axd or any other type of end point that's emitting a JavaScript file. Let's have a look.

Debugging JavaScript

Most web developers already have a good handle on this. To debug JavaScript with Internet Explorer perform the following tasks.

  1. Open up Internet Explorer. Click Tools->Options.
  2. Click on the the Advanced Tab.
  3. Under the Browsing category, ensure that the "Disable script debugging (Internet Explorer)" is unchecked (below).Enabling script debugging in Internet Explorer to enable JavaScript debugging.

Two Ways to Attach

Once this is done, you have two options. The first is to visit the page you want to debug and once the page is done loading, click View->Script Debugger->Open (or Break at Next Statement if you want to debug a specific JavaScript call). Then choose a New instance of Visual Studio 2005 (or 2008 if you prefer).

You'll now be able to debug the document and any JavaScript that is running on that page. Simply put down a break point on any inline JavaScript or JavaScript functions and you'll be able to stop execution of code, pull up immediate windows, quick watches, etc...

Debugging an HTML page with Visual Studio 2005/2008 and Internet Explorer.

Another way to trigger the debugger is to use a the special debugger keyword in an inline JavaScript call which will also allow you attach Visual Studio (or the Script Debugger). This usually involves you injecting some JavaScript into the page.

Consider the following html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
    <p>
        Some random html
    </p>
    <script type="text/javascript">
        var foo = "some string";
        debugger;
    </script>
</body>
</html>

Notice the use of the debugger keyword? This is a special command which causes a runtime exception and allows Visual Studio to attach and debug. This is often useful if you want to attach and debug before the page is finished loading in the browser. As an example you could take the above html, and use it to make a test.html page. When you open it in Internet Explorer you will have the option of attaching to it.

To use either option you need to enable script debugging in IE (see above steps 1 to 3).

Script Explorer

The last tip I have in this post is using the Script Explorer window. This is a window that's buried in Visual Studio that lets you see all the scripts in play.Script Explorer in Visual Studio 2005/2008.

Consider the screen cap below which is attached to the default.aspx of a SharePoint Team Site. This page has many JavaScripts in play and the Script Explorer allows you to open up any of them and set breakpoints. This makes it a lot easier for you to debug a certain section of code, even if that code is buried in some WebResource.axd or coming from some other bizarre location. SharePoint developers will probably notice WSS' init.js and core.js. We can double click on any of these these JavaScript documents in the Script Explorer and set breakpoints to start debugging and troubleshooting.

To pull up the Script Explorer you can either press CTRL+ALT+N while debugging OR you can add it to a toolbar by doing the following:

  1. In Visual Studio click Tools->Customize
  2. Under the Commands tab click the Debug category.
  3. Find Script Explorer and drag it into a toolbar or menu (like Debug).

Using the Script Explorer with option two (using the debugger keyword) gives you tremendous flexibility in seeing exactly what is happening JavaScript wise in your page. This becomes quite powerful because you can attach very early in the document lifecycle where as you can only attach after the document is finished loading in option one.

Recap

In this post we looked at various ways to debug JavaScript using IE and Visual Studio. Although Visual Studio 2008 boasts the ability to debug JavaScript as a new feature, you've really been able to do it since at least Visual Studio 2003.

I know there are other JavaScript debuggers out there like the FireFox extensions JavaScript Debugger, and Firebug, but I tend to live in Visual Studio. It's also important to remember that JavaScript is interpreted by the browser and you may get different results in different browsers since they have their own interpreter. As a result some JavaScripts that behave correctly in one browser may act differently in another. When this happens you'll probably end up using Visual Studio to fix the script for IE and then use a FireFox JavaScript debugger to figure things out for the Fox.

Take Care,
Tyler Holmes

1 comment:

Thiago said...

what if im not using IE? how to do that with Chrome for example?