Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (28)

Using Visual Studio to Debug JavaScript in IE

By , 24 May 2007
 

Using break points to debug your javascript

Introduction

Anyone who has done some work with JavaScript knows it can be very frustrating. Often you have to use: Alert("I am here"); type of code to debug it. Visual Studio and IE (Internet Explorer) have the ability to debug JavaScript code, including setting break points in your JavaScript.

Background

When I started working in .NET, I was a VB.NET Windows programmer. When I started to use ASP.NET, the need to use JavaScript started to come up. It was easy for me to make mistakes in my JavaScript since it is a C based language, so there was a real need to have the ability to debug my JavaScript code. I don't think I would have ever ventured into the JavaScript world without being able to debug it in Visual Studio.

Setup

In IE you have to enable script debugging. Go to Tools, then Internet Options. Click on the Advanced Tab. Un-check disable script debugging (Internet Explorer). It is checked by default.

Advanced tab to enable script debugging

NOTE: you will find with script debugging enabled that many Internet sites have lots of JavaScript problems. So I would suggest only turning this on when you want to debug your JavaScript otherwise you will be bothered by IE asking you if you want to debug other peoples bad JavaScript.

Once you have this set, a new option is available in your View menu. If you click on View there is now a script debugger option. If you are using IE 7 you will need to click on Tools, then Menu bar to see the View menu item.

Screenshot - Scriptdebug1.gif

So at this point in Visual Studio, if you set your web project / web site to debug mode and run it, you can debug your JavaScript.

Under View/Script Debugger there are two options. The first is Open.

Screenshot - Scriptdebug3.gif

This will open the HTML/JavaScript in Visual Studio and allow you to set break points in your JavaScript.

Screenshot - Scriptdebug4.gif

The other option is Break at next statement which does just what it says. When the next JavaScript gets run, you will go into Visual Studio and it will break on the first JavaScript line.

Screenshot - Scriptdebug6.gif

Once you are in the Visual Studio debugger, you can use all of the normal tools you have to investigate variables etc. to help with the debugging of the JavaScript code.

Using VS tools to debug

Conclusion

I have found that being able to debug my JavaScript has really helped me to find all the small problems and bugs that are so easy to create when writing JavaScript code.
I hope this article helps you in your JavaScript debugging.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

 kubben
Web Developer
United States United States
Member
I started my programmer career over 16 years ago doing COBOL and SAS on a MVS mainframe. It didn't take long for me to move into windows programming. I started my windows programming in Delphi (Pascal) with a Microsoft SQL server back end. I started working with vb.net when the beta 2 came out in 2001. After spending most of my programming life as a windows programmer I started to check out asp.net in 2004. I achieved my MCSD.net in April 2005. I have done a lot of MS SQL database stuff. I have a lot of experience with Window Service and Web services as well. I spent three years as a consultant programing in C#. I really enjoyed it and found the switch between vb.net and C# to be mostly syntax. In my current position I am programming in both vb.net and C#. Lately I have been using VS2012 and writing a Windows 8 app. You can search for the app it is called ConvertIT.
 
On a personal note I am a born again Christian, if anyone has any questions about what it means to have a right relationship with God or if you have questions about who Jesus Christ is, send me an e-mail. ben.kubicek[at]netzero[dot]com You need to replace the [at] with @ and [dot] with . for the email to work. My relationship with God gives purpose and meaning to my life.

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
First PrevNext
GeneralIs there a system field that hold the value of a JavaScript delimiter? : or $membersmcirish10 Mar '09 - 4:16  
if ( document.forms[0].elements[e].type.indexOf("select") == 0 && document.forms[0].elements[e].name.indexOf(prefix + ":lstProperties") == 0 )



In the above line of Javascript code, in VS2003, the app was looking for a ':' as a delimiter. In VS2005, this code quit working, it was now looking for a '$'

":lstProperties" ====> "$lstProperties"

However, we have had circumstances where on a VS2003 app, it may be run on a different environment when deployed to anther server. (not ideal I know) WTF | :WTF:
So I am looking for a system field that holds the value of this delimiter, so I can output it, and know what delimiter it is looking for.
 
smcirish
Texas
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $memberkubben10 Mar '09 - 4:25 
I think there is a better way to write your javascript. First the indexOf function should find your lstProperties when you have the prefix or not. Second if you are trying to figure out the control name it is usally better just to pass it into the javascript function.
 
So in your codebehind you have a controler lets call it lstProperties. In your code behind you can access what the control will be called in javascript. lstProperties.ClientID. This can be passed into your javascript function on assignment. For example:
btn1.Attributes.Add("onClick","yourJavascriptfunction('"+lstProperties.ClientID + "');")
 
Sorry if you didn't want VB.net syntax the C# isn't that different.
 
Now in your javascript function:
 
function yourJavascriptfunction(ctrl){
var tmp = document.getElementById(ctrl);
//other code here
}
 
Anyway, I don't know if that helps you or not.
 
Ben
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $membersmcirish10 Mar '09 - 4:47 
Thanks Ben,
 
I am not that familiar with JavaScript, would you mind being a little more explicit?
 
Can you give me an example of use of IndexOf, to find the delimiter?
 
smcirish
Texas
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $memberkubben10 Mar '09 - 4:50 
You know, it is perhaps better if you fully explain what you are trying to accomplish in javascript and then perhaps I can help you figure out how to do it.
 
Ben
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $membersmcirish10 Mar '09 - 6:05  
if ( document.forms[0].elements[e].type.indexOf("select") == 0 && document.forms[0].elements[e].name.indexOf(prefix + "<big>:</big>lstProperties") == 0 )
 
How do I update the line of code above, so I won't have to know whta the delimiter is?
 
":lstProperties")
 
smcirish
Texas
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $memberkubben10 Mar '09 - 6:11 
The above code doesn't tell me what you are trying to do. What is it that you are trying to do in javascript?
 
Ben
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $membersmcirish10 Mar '09 - 6:43 
It is parsing out employee info, to display in a select box. The delimiter will vary based the environment the app is being run on. VS2003 vs. VS2005.
 
So I have trying to either find a way to determine the delimeter, or alter the code so in case the delimiter varies.
 
smcirish
Texas
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $memberkubben10 Mar '09 - 7:50 
Ok that helps. Why don't you control the delimiter of the employee info? Where are you getting the employee info from? I have some javascript code that splits out delimiting values and populates a dropdown.
 
NOTE you have to be careful when using javascript to update asp.net server controls. Sometimes when you post back on submit the changed data isn't there. In that case sometimes the best thing you can do is use hidden variables.
 
Ben
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $membersmcirish10 Mar '09 - 7:58 
I cannot control the delimeter. I think it is a system field, because a different delimiter was used when the app was run on a different environment.
 
The app was created in VS2003, but it looked for : delimeter when it was run on a VS2003 environment.
 
and it looked for a $ delimiter when it was run on a VS2005 environment.
 

So, I just want to find a way to find out what the delimeter is, since it can change, based on the enviromnent.
 
smcirish
Texas
Sign In·View Thread·Permalink
GeneralRe: Is there a system field that hold the value of a JavaScript delimiter? : or $memberkubben10 Mar '09 - 8:07 
Ok, I still think there is a better solution for this, but here you go:
document.forms[0].elements[e].name.indexOf("lstProperties") != -1
 
So that code will return -1 if lstProperties can not be found anywhere in the name. If it exists in the name it will return back the index that text starts at.
 
Ben
Sign In·View Thread·Permalink
Last Visit: 31 Dec '99 - 18:00     Last Update: 24 May '13 - 13:13Refresh123 Next »

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

About Article
Using Visual Studio to debug JavaScript in IE can really speed up your JavaScript development and save you some headaches
Type Article
Licence CPOL
First Posted 24 May 2007
Views 67,301
Bookmarked 52 times

, +
Top News

Old Japanese Man Creates Amazing Art Using Excel (Wait, Excel?)

Get the Insider News free each morning.
Related Videos
Visual C# 2012: Debugging With Breakpoints Part 1
Visual C# 2012: Debugging With Breakpoints Part 2
Debugging client JavaScript in Visual Studio 2005/.NET?
Inside Vista Sidebar
JScript Debugger– “Unable to attach the process. Another debugger might be attached to the process” – while application is running from Visual Studio. [ Solution ]
Visual Studio 2012 New Features of the IDE
How to fix JavaScript Errors
Use IntelliSense in JavaScript Files
Remote IIS Debugging : Debug your ASP.NET Application which is hosted on "Remote IIS Server"
XML Visualizer v.2
Concepts of Abstract Programming Using ASP.NET and JavaScript
Debugging Windows Services under Visual Studio .NET
ASP.NET and jQuery to the Max
Using the Windows 8 Simulator & VS 2012 to Debug the IE10 Touch Events & Your Responsive Design on the Web
Develop Your Own Operating System in C# or VB.NET
SQL Stored Procedure Debugging Using Visual Studio .NET 2005
Operation Performance Evaluation
Package that speeds up loading of JavaScript, CSS and image files
Quickstart: Debugging Apps (JavaScript)
Debug your ASP.NET Application while Hosted on IIS
HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 1 - JavaScript and DOM.
Zeta Color Visualizer
Permalink | Advertise | Privacy | Mobile
Web01 | 2.6.130523.1 | Last Updated 24 May 2007
Article Copyright 2007 by kubben
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid