Kiran Kumar {Bheemarti}: How To..Debug JavaScript in Visual Studio 2005

By now everyone know that Visual Studio 2008 came with Intellisense and debugging ability for JavaScript. What surprised me was many either don't know or never used the intellisense and debugging ability for JavaScript that was/is available in Visual Studio 2005, by many I mean atleast my close developer friends, so I decided to do a tutorial type blog on this feature in VS2005. Visual Studio 2005 has a limited intellisense for javascript and a full blown debugger.

To start with first step to do, to enable Studio to start debugging JavaScript is to uncheck the disable script debugging option in Tools->Advance settings in IE.

Create a new web site say "ScriptExplorerTest" in VS2005 add a folder "Scripts" and add the JavaScript file MainScript.js to it, also Add some html to Default.aspx page, we keep it simple with just one Script file and one web page, our main intent is to debug script. Below is the solution structure, html and code behind of the default.aspx page also check the simple script function in MainScrip.js, I like to keep all my script files under one separate folder so I created the folder "Scripts" but as we know its not required.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="Scripts/MainScript.js"></script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
      function HelloWorld()
      {
        alert("Hello, I am loading the page");
      }
    </script>
</head>
<body onload="HelloWorld();">
    <form id="form1" runat="server">
    <div>
      <input type="submit" value="Name?" onclick="HelloWord2(); return false;" /><br />
      <input type="text" id="lblName" />
    </div>
    </form>
</body>
</html>

MainScript.js

// JScript File

function HelloWord2()
{
  var name = prompt("Enter Name");
  document.getElementById("lblName").value = name;
}

Lets run quickly and see how this code reacts.

Script Explorer: Like immediate, output, command etc., we have a window that works in the debug phase and this is the window we can use to work with Javascript and it is ScriptExplorer.

I usually keep all my windows (Immediate, Command, Solution, etc.,,,,,, along with ScriptExplorer separately on a separate monitor, just a personal preference) I also assign shortcuts to each of these windows and I believe it saved me tons and tons of time for sure, I even have a custom toolbar with only those icons I use the most, and that's the only toolbar I usually keep open.

Custom Toolbar.....

Keyboard Shortcut assignment window.......

Anyways,,,,,Coming back to the point, since we have enabled the script debugging in IE, now when we run the website we can see a new window in Debug menu or we can use one of the shortcuts we worked on above, to open the Script Explorer

Script Explorer Looks like below

Script Explorer lists all the files that a browser is rendered, it lists the rendered page (see default.aspx above) along with all inline javascript and included javascript from the script files. If we click the Default.aspx in the above window and open the file, we actually see the rendered page, similar to what we see when we do a View->Source on the webpage. If you notice the tab of the opened Default.aspx in the editor window you will not see the actual default.aspx path but you will see something like

yes...http://localhost...blah blah that is the rendered page. You can also see the rendered Javascript by opening the script file in the ScriptExplorer

Lets start debugging now..... once you open the web page and script pages from the Script Explorer as above you can set breakpoints in the Script

Now refresh the page you see the breakpoints will be hit and you can start debugging your ...............JAVASCRIPT...yes good to have VS2008 but that should not  stop you loving JavaScript :)

Once the breakpoint is hit, we pretty much have the whole DOM to traverse through and check the values and play with them, immediate window can be used as usual for this

Coming back to intellisense, I started saying there is a limited intellisense available, yes it is, if you write the javascript in your page and not separate in the script, we can as well write the script in the page itself then move it to separate script file once debugging is done and we are satisfied.

I am not sure how limited this intellisense is but, I believe it works with the known types like Dom and its child elements and methods.

I hope this will help you, If I missed anything or gave any wrong info please understand it would be out of my limitation of knowledge on this and not intentional, if such things are found please do write a comment and I promise to correct myself.

Lastly few great resources if working with Javascript

1. Firebug....this is an awesome addon to firefox enabling to work with the rendered DOM tree and write test script and much more please check it out

2. IE Developer tool

3. YSlow : sits on top of firebug, I have a post on it in my blog you can digg for it.

4. http://www.howtocreate.co.uk/tutorials/javascript/dombasics

Thanks

Happy Scripting.......Ajax Rocks and JavaScript makes it do so.

Kiran Bheemarti

Kiran Kumar {Bheemarti}

Wednesday, June 18, 2008

How To..Debug JavaScript in Visual Studio 2005

1 comments:

About Me

Blog Archive

Fav Blogs