Debugging JavaScript using VS.NET and IE 6.0

From http://www.code101.com/Code101/DisplayArticle.aspx?cid=67

Introduction

Asp.net has come a long way from Asp on many facets, especially debugging. If you have work with ASP.net for a while and go back to work on ASP you would miss a lot of feature and debugging is the most you miss. Visual studio.net is an awesome IDE tool, allows you to step through the your server code, stored procedure and JavaScript too - Did you know this?

There is a growing demand for highly scalable, reliable and rich user experience web application, JavaScript has a major role to play on the client side scripting to avoid post back and never the less to avoid view state moving back and forth the wire in ASP.net applications.

Lets dive in and see how to debug JavaScript

IE browser settings

This work only with Internet Explorer 6 and VS .NET The first thing to do is to get browser settings right. Open IE and select the following menus Tools | Internet Options | Advanced | Disable script debugging (uncheck)

Back to ASP.net application

Let us try out a quick sample. Open an Asp.net project Drop a HTML button on the web form and write a javascript to add two numbers and raise an alert message on the client.

<script language="javascript"> function Sum()  {    var a=10;    var b=20;    var c=a+b;    alert(c);  }</script><INPUT type="button" value="Button" onclick="Sum()">

Now run your project and when you see you web page go to the design mode of visual studio and select Debug | Windows | Running Documents from the Debug menu. This opens up a Running documents explorer click on the JavaScript.aspx file and place the break point on the line of Javascript you want to debug.

From here are you could debug like any server code – use the “Locals Window” to see all the objects or Immediate window to change values of the variables

Debugging JavaScript in External files

ASP.net debugger also allows us to debug javascript present in the in external files. Move this Javascript Sum() function to a file named JScript1.js and refer the JScript1.js file in the webpage

<script language="javascript" src=/Code101Demo/JScript1.js>

Run the project and repeat the steps Debug | Windows | Running Documents from the Debug menu. In Running documents explorer now you would see two files JScript1.js and JavaScript.aspx. Double click on the JScript1.js and set the break point as shown in the screen shot.

This technique is very handy not only to debug but also to learn a lot about how the Validation controls and Smart Navigation works in ASP.net. For those who are new to ASP.net the above-mentioned functionality are implemented using JavaScript file WebUIValidation.js and SmartNavIE5.js

By default they are located in the \aspnet_client\system_web\1_0_3705_288This folder name 1_0_3705_288 represents the CLR version number so each version of CLR would have a different client JavaScript files.

Debugger key word

Instead of manually setting the break point we could use the bedugger key word on the line to break. This technique comes handy on the scripts that run when the form loads. Lets try it out on the previous code.

function Sum()  {    var a=10;    var b=20;    var c=a+b;    debugger;    alert(c);  }

Conclusion

Debugging JavaScript is really a cool feature of VS.net this saves developer a lot of time and frustration when writing JavaScript. Beside this it gives you chance to peeking into the plumbing activities of client side validation controls.