Debug JavaScript in Visual Studio 2005

by Mads Kristensen 6. May 2007 06:00

I’ve been using Visual Studio 2005 for almost 2½ years since the beta 1 release. In all that time, I’ve used Firefox and Firebug for all JavaScript debugging. I’ve tried setting breakpoints in JavaScript in Visual Studio before, but I never got it working so I left it for Firebug. Then the other day, our new developer at Traceworks told me that Visual Studio could be used for debugging and that it is possible to set breakpoints in the JavaScript files.

This of course illustrates that I’m slow – 2½ years slow to be exact. For those of you, who are as slow as me, keep reading and I’ll tell you how to debug JavaScripts in Visual Studio.

Set up Internet Explorer

Internet Explorer has disabled the possibility to debug scripts by default, so the first thing to do is to enable it. In the top menu, go to Tools -> Internet Options -> Advanced. Here you need to remove the checkboxes in Disable script debugging. This is needed for Internet Explorer to tell Visual Studio about the JavaScript running in the browser.

Start debugging

In included .js files you are now able to set break points as you normally would in C# or VB.NET. The execution stops at the break point and you are able to see the values of the variables and to move forward by hitting F10 and F11 like normal. The experience is exactly the same as debugging C# code.

For inline JavaScript you cannot set break points, but Microsoft did provide us with an alternative. If you add the word debugging wherever you want in the script code, the execution will stop at the word and you can debug exactly the same way as setting a break point.

For this to work, you must run Visual Studio in debug mode. That’s it, extremely powerful and easy to do. The only thing I don’t like about this is that I didn’t know about it before now. C’est la vie.

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

Tags: , , ,

Client-side

Comments

5/7/2007 3:44:30 AM #

zproxy

And you could use visual studio + c# to write your javascript application. Visit <a href='jsc.sourceforge.net/.../Class1.packed.htm'>my latest demo</a> or <a href='http://zproxy.wordpress.com'>my blog</a>.

cheers

zproxy Estonia |

5/7/2007 3:45:52 AM #

zproxy

By the way this preview is messed up - it shows the url of the avatar and it doesn't say that one should not use html. Foot

zproxy Estonia |

5/7/2007 4:42:49 AM #

Mads Kristensen

zproxy. I've fixed the Gravatar issue in the live preview. Thanks for letting me know. Regarding HTML in comments, I don't find it an issue. When you type in a URL, it automatically get's styled as a link in the live preview. In other words, you can see that it will be displayed as a link and that you don't need to write HTML tags.

Mads Kristensen Denmark |

5/7/2007 6:40:59 AM #

John

Javascript debugging was available in VS2003 as well.  I don't know if I can live without it.  We have made decisions to build projects in .net as opposed to php or some other web back end solely for that reason.  

John United States |

5/7/2007 10:06:39 AM #

Al Nyveldt

I just recently read this somewhere, but can't remember where.  It was new to me as well.  I wonder how much more helpful functionality I'm missing out on.

Al Nyveldt United States |

5/7/2007 11:33:50 AM #

Henry Thompson

The 'debugger' command has been around since at least Visual Interdev if not longer and Interdev (VS 97) had JS debugging built-in.  If you are interested the 'debugger' equivalent in VB Script is 'stop', for those of us still writing MS Office Macros.

Henry Thompson United States |

5/7/2007 2:51:49 PM #

Mads Kristensen

Henry, that actually means that i'm 10 years slower than normal people. My only comfort is that i'm not alone. Ohh hi Al Smile

Mads Kristensen Denmark |

5/7/2007 8:32:15 PM #

Donn Felker

This is very cool. I blogged about this same thing awhile back too. Smile
blog.donnfelker.com/.../...criptUsingDebugger.aspx

Donn Felker United States |

5/9/2007 10:04:17 PM #

Michal Talaga

The main problem with JS debugging in IE/VS is that it does not work more often than not. There is no solution for this problem, although many claim they have one. It may work on the first run, on the second etc, but sooner or later it stops. There are some voodoo rituals you can try to perform that help. Sometimes restarting Visual Studio/IE/Windows helps, but not always. On some machines, the problems comes and goes, but I have seen cases where JS debugging has never worked!
Still if I have to choose between crappy FireBug and VS I always try VS first.

Michal Talaga Poland |

5/10/2007 1:37:26 PM #

pingback

Pingback from dennydotnet.com

Debug JavaScript Tips

dennydotnet.com |

Comments are closed

About the slave

Mads Kristensen Mads Kristensen
Web developer at ZYB and founder of BlogEngine.NET. More...

LinkedIn ZYB Facebook Last.fm Twitter View Mads Kristensen's profile on Technorati

The Lounge

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008