Database Search Solution
(New Version) Search Control
Free ASP.NET Controls
ASP.NET Media Player Control
Flash Video Player Control
ASP.NET Telecommute Jobs
Free IP Location Lookup
Test .Net Regular Expressions
CSS/Table/DIV Page Layouts
Article Sites Master List
.NET Windows Forms
General .NET Framework
Accepting Credit Cards
Client Side Script Debugging in ASP.NET
Every one of us is well aware of problems posed when debugging client side script code. This article talks about various new techniques and troubleshooting tips that help debug client side script code efficiently in Visual studio 2005.
Client side script code means that it can be VB Script or J# script or Java script. Client side script is embedded in .aspx pages, .html files or inside .js files. Generally, client side script is loaded by client application like Internet Explorer running on your local machine.
There are two different ways in which can debug client side scripts in Visual Studio 2005. They are:
Configuring machine to enable client side script debugging
Before we start to debug client side script code, certain settings have to be made like this:
Enable client side script debugging in Internet Explorer. To do this go to Tools ->Internet Options and on advanced tab make sure that the Disable script debugging is unchecked. Below listing highlights above step
Visual Studio .Net IDE
You can now debug client side script code directly in Visual Studio 2005 environment. It is made possible through powerful debugging options that enable you to debug managed code, script code, T-SQL code, and native code. Visual studio 2005 supports 64-bit debugging either locally or remotely. You can now debug Java scripts hosted by IE. Visual studio debugger provides enhanced new features like data tips, visualizers which allow us to view contents of complex variables and data types in a meaningful way. Let's see new capabilities using an example Visual Studio 2005 project.
We create an ASP.NET web application that greets the user. We use Java Script for processing the result.
Once we run above code, we get the below output.
Return to Visual Studio .Net environment and click Debug ->Other windows->Script Explorer and set the breakpoints at the desired places.
Again return back to IE. Give the values for the first name and last name and click greeting button. You can see control returning to Script Explorer as shown in below listing. Use F10 to step over each line of code. Similarly, use F11 to step into each line of code. In script explorer, you can set new breakpoints and use Locals Window to inspect values of local variables in the script. Immediate Window evaluates the values of variables. See the Data tips by hovering over the variables.
To invoke Immediate Window click Debug->windows->Immediate. Similarly Locals Window is invoked via click Debug->windows->Locals
You can also use Command Window to execute commands against script code variables like Debug.print command. To invoke Command Window click->View->Other Windows->Command Window. Several other features like Autos Window, Call Stack Window are also accessible. You can observe Command Window in below listing
Microsoft Script Editor
Microsoft Script Editor (MSE) is powerful tool which debugs Java scripts using Internet Explorer as script host. It is shipped as free component in Office XP and Office 2003. This is an attractive option when all that you need is to debug Java scripts for IE and you don't have Visual studio .Net installed on your machine. You can check for MSE in your machine by clicking View option on IE and see if you can find script debugger option.
Let's use same example to demonstrate debugging client side script code using MSE.
Going with the same example, Open the page in Internet Explorer and click View as shown in below listing.
After clicking Open /Break at Next Statement you can see Just-In-Time Debugger dialog box
Click yes to use MSE and you can see below listed dialog box.
Click Ok and you can see Microsoft Script Editor Environment open up and MSE offers almost same IDE as Visual studio.Net and similar others features like Locals Window and Command Window. You can use same F10 to step over code.
Alternatively, you can also use put a line like this in Java script.
Debugger keyword will create a breakpoint. When this breakpoint gets hit, your MSE will launch and you will see a message that says "An unhandled exception 'Script Breakpoint' occurred" in script.
Choose yes and remaining steps are same as discussed in first method of working with MSE. Control is transferred to Script Editor IDE.
Finally you get after successful debugging you get this message as output.
When you are done debugging make sure the browser is not waiting for debugger. Simply press F5 to continue or else explicitly close the debugger. Click "Yes" when it prompts to close debugger. This way you can save from computer hang up. (It happened to me!!) When using MSE.
Visual Studio 2005 Integrated debugger is very powerful and rich in features. You can now debug client side script code with the same flexibility as you used to have with debugging server side code. You can say good bye to clumsy alert statement technique employed in Java script debugging. Microsoft Script Editor is another attractive option for debugging with no fewer features compared to Visual studio 2005 debugger.
comments powered by Disqus