JavaScript debugging in Visual studio 2008:
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 2008.
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 2008. They are:
Before we start to debug client side script code, certain settings have to be made like
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
Enable Script Debugging in IE
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Greetings</title>
<script language ="javascript" type="text/javascript">
function btnGreeting_Clicked()
{
debugger
var firstname;
var lastname;
var greeting;
firstname = document.all('txtName1').value;
lastname = document.all('txtName2').value;
greeting = "Hai" + " "+ firstname + " " + lastname + " " + "Have a great Day!";
alert(greeting);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td width="100">
<asp:label id="lblFirstName" runat="server" Width="125">
FirstName:
</asp:label>
</td>
<td width="50">
<input id="txtName1" type="text" maxLength="30" name="txtName1" style="width: 140px">
</td>
</tr>
<tr>
<td width="100">
<asp:label id="lblSecondName" runat="server" Width="125">
LastName:
</asp:label>
</td>
<td width="50">
<input id="txtName2" type="text" maxLength="30" name="txtName2" style="width: 139px"/>
</td>
</tr>
</table>
<br>
<table>
<tr>
<td width="150" align="center">
<input id="btnGreeting" onclick="return btnGreeting_Clicked()"
type="submit" name="btnGreeting" value="Greeting">
</td>
</tr>
</table>
</form>
</body>
</html>
Output listing for greeting program
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.
Script Explorer in Action
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
Script Explorer in action
Microsoft Script Editor:
Let’s use same example to demonstrate debugging client side script code using MSE.
IE with MSE
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. (See the below listing)
Microsoft Script Editor IDE
Alternatively, you can also use put a line like this in Java script
Debugger;
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' has occurred in script. See below given listing
Just-In-Time Debugger
Choose yes and remaining steps are same as discussed in first method of working with MSE. Control is transferred to Script Editor IDE.
Microsoft Script Editor IDE
Finally you get after successful debugging you get this message as output
Visual Studio 2008 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 2008 debugger.
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 2008.
Visual Studio .Net IDE
- Microsoft Script Editor
Before we start to debug client side script code, certain settings have to be made like
Enable Script Debugging in IE
Visual Studio .Net IDE:
You can now debug client side script code directly in Visual Studio 2008 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 2008 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 exampleWe create an ASP.NET web application that greets the user. We use Java Script for processing the result.
Open Visual Studio 2008 Environment and On the File menu, choose new website and choose your own specific language(VB or C# template)
- Copy this code and press F5 (Start Debugging) to start debugging. IEXPLORE.EXE process is attached automatically to debugger. We are using IE to load the scripts so IEXPLORE.EXE is attached.
<%@ 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"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Greetings</title>
<script language ="javascript" type="text/javascript">
function btnGreeting_Clicked()
{
debugger
var firstname;
var lastname;
var greeting;
firstname = document.all('txtName1').value;
lastname = document.all('txtName2').value;
greeting = "Hai" + " "+ firstname + " " + lastname + " " + "Have a great Day!";
alert(greeting);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td width="100">
<asp:label id="lblFirstName" runat="server" Width="125">
FirstName:
</asp:label>
</td>
<td width="50">
<input id="txtName1" type="text" maxLength="30" name="txtName1" style="width: 140px">
</td>
</tr>
<tr>
<td width="100">
<asp:label id="lblSecondName" runat="server" Width="125">
LastName:
</asp:label>
</td>
<td width="50">
<input id="txtName2" type="text" maxLength="30" name="txtName2" style="width: 139px"/>
</td>
</tr>
</table>
<br>
<table>
<tr>
<td width="150" align="center">
<input id="btnGreeting" onclick="return btnGreeting_Clicked()"
type="submit" name="btnGreeting" value="Greeting">
</td>
</tr>
</table>
</form>
</body>
</html>
HTML Listing for greeting program
You should always include keyword “debugger” as the first line of Java script code you wish to debug in Visual studio 2008. This keyword automatically invokes Visual Studio client side debugger.
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
Script Explorer in Action
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
Script Explorer in action
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. (Please see below listing)
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
IE with MSE
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. (See the below listing)
Microsoft Script Editor IDE
Alternatively, you can also use put a line like this in Java script
Debugger;
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' has occurred in script. See below given listing
Choose yes and remaining steps are same as discussed in first method of working with MSE. Control is transferred to Script Editor IDE.
Microsoft 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 2008 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 2008 debugger.
