Debugging client JavaScript in Visual Studio 2005

<< CSS-like Windows Forms | Home | Simple Label control >>

Debugging client JavaScript in Visual Studio 2005

Client Java Script is one of the most important things in web development but not the best and easiest to develop. Building of bigger and more complicated scripts, especially using DOM model or form field values can cause a lot of frustration and head pain. Moreover, JavaScript debugging is not easy and obvious as should be. But there is a hope.

One of less known features of Visual Studio 2005 is Script Explorer, hidden in Debug menu where appears only when the debugger is running. This great tool allows easily debug JavaScripts.

Before start, we should ensure that client script debugging is not disabled in IE as it is by default. Suitable options are located on Advanced tab of Internet Options where both script debugging checkboxes should be unchecked.

We can come back to Script Explorer. As it was written before, it appears only while the debugger is working. So after starting project we can go do Debug->Windows where should be Script Explorer. Sometimes, don’t know why, it doesn’t so in this case we have to find it manually. Staying in debug mode right click on tool bar and go into Customize. Then select Debug in Categories on the left side of window and find Script Explorer on the right. Just drag it to Debugging toolbar.

After opening Script Explorer panel we will se the tree of active JavaScripts. At the first level are scripts that are imported from external sources or embedded in the page. There are also auto-generated scripts like postback scripts as well. By double-clicking on the selected script it will open in the main window.

At this moment, we can debug it in well known way using breakpoints, steps, Watch and QuickWatch, just like in the server side, including context browsing of a variable.

Breakpoints can also be set up in external *.js files before project will be loaded. Then, after loading project, the breakpoint will be activated by debugger. Note, that it is only possible to *.js files not for scripts embedded in pages. These scripts are available for debugging only after loading page.

Hope it helps.

Print posted @ Monday, July 10, 2006 10:07 AM

Feedback

# re: Debugging client JavaScript in Visual Studio 2005

Very useful post :)
By the way... I have bought very good book about JavaScript from Wrox. I recomend it for everyone: http://www.wrox.com/WileyCDA/WroxTitle/productCd-0764579088.html
There is a lot of useful tips and information garther from many places. 7/17/2006 4:21 AM | Marcin Obel

# re: Debugging client JavaScript in Visual Studio 2005

Thanks for the tips. I was having a horrible time figuring out why the Script Explorer wasn't showing up in my Debugger window.

Can you tell me why I seem unable to debug script embedded in aspx pages? I'm running IE 7, is that perhaps causing the issue? 8/11/2006 7:29 PM | Tom Jaspering

# re: Debugging client JavaScript in Visual Studio 2005

I'm glad to see that comments. Well, glad to see any comments :)

I'm using IE 7 too, but no matter what browser you are using, sometimes VS don't want to open scripts from resources. Don't know why, but it happens.
Scripts you wrote and embeded in page should be accessible by opening page itself or by one of scripts located under the page in Script Explorer.

If you will have still problems, drop me an email please, will try to find solution together. 8/14/2006 6:18 AM | Lazy developer

# re: Debugging client JavaScript in Visual Studio 2005

Hi,
I hv a problem using script debugger with IE7.
i already used it with VS2005 with IE6. but after i installed IE7 (both i tried B2 n B3) its not functioning. when i try to put breake point (where ever), bottom of the IDE showing a msg "This is not a valid location for a breakepoint".
can you say why is that and is there any solution for it. Thank you 8/24/2006 1:31 PM | Vins

# re: Debugging client JavaScript in Visual Studio 2005

Never saw something like that. I'm using IE7 (Beta 3) and Firefox and in normal conditions both are working well. Please ensure that you have debugging turned on in IE (see first screen above). 8/25/2006 6:18 AM | Lazy Developer

# re: Debugging client JavaScript in Visual Studio 2005

I have the same problem. Cannot set a breakpoint in a javascript with vs2005 and ie7 rc1.

I works with ie6 and vs2005. 9/5/2006 12:40 AM | Patrick Gagnon

# re: Debugging client JavaScript in Visual Studio 2005

To be honest, I completly don't know what's going on. I'm using this on two machines with IE6, IE7 (Beta 2, 3 and RC1) on Windows XP x86 and x64 without any problems. It's working in Mozilla as well.
Could you please contact me directly on msn/email (ziemowits (at) hotmail (dot) com)? Will ty to find solution together. 9/11/2006 2:07 PM | Lazy Developer

# re: Debugging client JavaScript in Visual Studio 2005

I am trying to debug some javascript in VS and when i open the Script Explorer the window doesnt show anything. Im attached using Script Code to iexplorer.exe. Any ideas why the window inst displayin anything? 9/12/2006 3:24 PM | Jables

# re: Debugging client JavaScript in Visual Studio 2005

Check if you have enabled JavaScript debugging in your IE (as it in in the first image in post). Run site from visual studio in debug mode instead of attaching debugger to process. 9/13/2006 12:44 PM | Lazy Developer

# re: Debugging client JavaScript in Visual Studio 2005

Any trick to setup breakpoints in code that is in the HTML files?
Or ever more complicated.... a string variable that is later on "added" to the page?
10/5/2006 6:29 AM | Idan

# re: Debugging client JavaScript in Visual Studio 2005

Well, scripts in HTML file sometimes (!) are visible in ScriptExplorer. Sometimes, because I can't figure out any pattern here. Some scripts are displayed but some aren't. The same is with scripts used in events such as onclick. I've found, that scripts registered using ClientScript are usually displayed on the list in ScriptExplorer. Know that it not helps too much. 10/6/2006 6:31 AM | Lazy Developer

# re: Debugging client JavaScript in Visual Studio 2005

Referring to the previous post, I also cannot set the breakpoint and event show the script in the script explorer in VS2005 with ie7 rc1 10/8/2006 2:58 AM | LenFocus

# re: Debugging client JavaScript in Visual Studio 2005

I had the same problem... I deleted my temporary internet files, set the cache to refresh each time i loaded the page and it still didn't work...

on a whim, i selected a new instance of visual studio when asked for the debugger to use, and viola! it found the correct breakpoint and i was able to set and navigate to breakpoints. It must have something to do with debugging in the vs instance i already had loaded... 10/10/2006 4:50 PM | erikl

# Problem with IE7

it works well with IE6, but it has problem with IE7 for both VS2003 and VS2005. Please read this message:

http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=850746&SiteID=1
10/26/2006 3:14 AM | bx68

# re: Script Explorer fails to display scripts

I also can't seem to get the script explorer to display the list of scripts in the currently running window. I have set IE (6) to allow script debugging. Also, I have set the ASPCLIENTDEBUG cookie as specified in the documentation.

I start the web app in VS2005 (Debug|Start debugging) and then do a Debug|Break All. When I open the script explorer, the window is always empty.

Any help would be much appreciated.

Thx
11/27/2006 7:53 PM | Marc

# re: Debugging client JavaScript in Visual Studio 2005

RE: Above Posting....

AAAAAARRRRRRRGGGHH! - I've got it.

Under Tools|Optioins, go to Debugging and open Just-In-Time.

Make sure that "Script" is checked.

Fixes the problem (not surprisingly) Too bad that nobody tells you about this one. I guess that the setting of these things happens as a result of the options you select the first time you run VS2005. I selected C# Desktop.

Its dumb to have to know this kind of crap in order to make a living.

11/27/2006 8:09 PM | Marc

# re: Debugging client JavaScript in Visual Studio 2005

I have been successfully debugging Javascript in IE6 - VS2005 for last 8 months. Installed IE7 yesterday, and the script explorer has stopped loading the runtime page. It loads the .aspx page instead which isnt the running code, and is of no use for debugging. I checked all settings above. Please help!!! 11/28/2006 10:37 AM | Betoyi

# re: Debugging client JavaScript in Visual Studio 2005

I have the same issue with IE7. Any script already in the ASPX page will not allow me to set a breakpoint and gives an error stating it is an invalid location. This worked in IE6. I checked the setting in options that someone mentioned and I have that set and it still doesn't work. I looked into using the debugger built in to IE7 but my pages are part of an app and do not have the menu shown. This is maddening. 12/4/2006 2:08 PM | DMiller

# re: Debugging client JavaScript in Visual Studio 2005

Wow, I see that this post is still very popular. Sorry for no response so long time, but I don't receive any notifications about comments here anymore.

As bx68 mention somewhere above, there is an issue with IE7 that makes Script Explorer working wrong. However it's still posible to debug scripts in IE7 but it needs a bit more effort. If you will put all of your scripts in the external .js file you will be able to debug it without any poroblems. Problems are with scripts embeded into page source.
Hope that helps 12/7/2006 7:55 AM | Lazy Developer

# re: Debugging client JavaScript in Visual Studio 2005

awesome ... i was figuring out why my script explorer wasn't working.. thx for the screenies.!!!!!!!!! 12/11/2006 6:48 AM | xoulrage

# re: Debugging client JavaScript in Visual Studio 2005

awesome ... i was figuring out why my script explorer wasn't working.. thx for the screenies.!!!!!!!!! 12/11/2006 6:48 AM | xoulrage

# re: Debugging client JavaScript in Visual Studio 2005

sry double post 12/11/2006 6:48 AM | xoulrage

# re: Debugging client JavaScript in Visual Studio 2005

Wow, this really is a javascript lifesaver. Thank you so much poster. 12/20/2006 2:51 PM | Ryan Pfister

# re: Debugging client JavaScript in Visual Studio 2005

Good article, thanks. 12/27/2006 1:08 PM | Jportelas

# re: Debugging client JavaScript in Visual Studio 2005

Is there a way to see the list of objects in a collection, ideally, with their name/id/... keys?

I'm finding that if I enter "document.all" into the watch window and hit return, a "+" appears before the expression and an ellipsis appears as its value. If I click on the +, document.all expands but only to show two lines:

length 192
_newEnum {...}

These lines don't expand any further.

Is this the way VS2005 is intended to work?

Mike 1/19/2007 8:29 PM | Mike Blake-Knox

# re: Debugging client JavaScript in Visual Studio 2005

The most easiest way for me was to use the debugger keyword in the javascript.

Take a look at my post..
http://mohansmindstorms.spaces.live.com/Blog/cns!69AE1BEA50F1D0E7!233.entry 1/31/2007 5:44 AM | Mohan

# re: Debugging client JavaScript in Visual Studio 2005

This is the comple url
<A href="http://mohansmindstorms.spaces.live.com/Blog/cns!69AE1BEA50F1D0E7!233.entry">using the debugger keyword</A> 2/2/2007 5:12 AM | Mohan

# re: Debugging client JavaScript in Visual Studio 2005

I met the same problem before.
I installed the Script Debugger for NT4 and later. Than the problem seems to be soluved.

I not sure if it happens together with VisualStudio.NET 2/8/2007 6:49 PM | Henry Wu

# re: Debugging client JavaScript in Visual Studio 2005

Nice post , got useful information to debugging client scripts
thanks
m@ndar
5/3/2007 1:08 PM | Mandar

# re: Debugging client JavaScript in Visual Studio 2005

WOPPEE, finally debugger works.

Actually tips on this site didn't help, but as so many people seem to struggle with same problem I thought to write it down here.

I was trying to attach VS2005 to debug iexplore.exe process in order to debug clientside JavaScript on site which was created with VS2003.
For some reason VS2005 didn't even show "Attach to process" option in menu so I had to use CTRL+Alt+P to get that dialog.

I downloaded Script Debugger from Microsoft:
http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
and also followed these instructions:
http://msdn2.microsoft.com/en-us/library/k2h50zzs(VS.80).aspx

Now I can attach VS to iexplore and Script Explorer now have some content.
You might want to try at first just with Script Debugger tool.
If it doesn't work, try debug cookie instructions from second link.

5/3/2007 5:14 PM | Joopa

# re: Debugging client JavaScript in Visual Studio 2005

Thanks for the work. It helped me a lot.... 8/25/2007 4:28 AM | Moim Hossain

# re: Debugging client JavaScript in Visual Studio 2005

Woow man!!! It works... I mean, I spent hell of time trying to do this... Thanks, 9/17/2007 8:24 AM | Falgun

# re: Debugging client JavaScript in Visual Studio 2005

After months of being working VS 2005 today I realized this script debuging utility and it is really cool. Thanks guys! 10/1/2007 6:09 PM | Rick Bridges

# re: Debugging client JavaScript in Visual Studio 2005

I mean "debugging" ;0 10/1/2007 6:11 PM | Rick Biridges

# re: Debugging client JavaScript in Visual Studio 2005

i dont have a script explorer menu in the debug -> windows option. any reason?? 10/15/2007 6:11 AM | dins

# re: Debugging client JavaScript in Visual Studio 2005

Thanks for the useful information. It really helped me a lot... 10/27/2007 5:14 AM | Hariprasad R

# re: Debugging client JavaScript in Visual Studio 2005

Hi,
maybe I'm to stupid, but I can not get debugging to work in VS2005.

I did as described at the very top of this page.
After, I opened an existing HTML file in VS2005. The page consists of a button and an on click event handler written in javascript.

Now I got stuck. how do I start the html page to get to my event handler in the end?

The menu entry "script explorer" is grayed out.

Any help is very welcome

Thanks
Sascha 12/8/2007 8:21 AM | sascha

# re: Debugging client JavaScript in Visual Studio 2005

Awesome! REAL debuggin in JS... it's the end of the "alert()"

I've tested it, and it works fine for both IE6 and IE7 and with VS2005 and VS2003, but VS2003 doesnt do sintax highlight.

Tank yoy very much!! 12/14/2007 1:33 AM | zevane

# re: Debugging client JavaScript in Visual Studio 2005

thank you.. can some one tell me can we use intellisense in Java script. sometimes it works but no as good as in C# code. or even HTML. 1/12/2008 4:03 AM | abhishek

# re: Debugging client JavaScript in Visual Studio 2005

Thank you ! 2/9/2008 4:34 PM | iPhone

# re: Debugging client JavaScript in Visual Studio 2005

If your Script explorer window is empty in Visual Studio then this is the magic info that you need:

http://msdn2.microsoft.com/en-us/library/k2h50zzs(VS.80).aspx

Thanks for all the help guys. I almost went mad when I could not figure out why my script explorer window is empty. And I cannot live with out using Visual Studio for Jscript debugging. 3/12/2008 4:54 PM | Naga

# re: Debugging client JavaScript in Visual Studio 2005

Hi,

How can i debug script embedded in aspx pages? VS2005 just doesnt allow me to do that (set breakpoints)

Thx 4/21/2008 12:23 PM | Xiao

# re: Debugging client JavaScript in Visual Studio 2005

Hey this is a very helpful topic. I guess we all developers have hard time debugging JS and this will help us a lot in that.
I just have one question, why i am only able to insert breakpoints in JS file and not in JavaScript written in the ASPX page? 5/15/2008 2:00 PM | Chitrang

# re: Debugging client JavaScript in Visual Studio 2005

hi thanks dude ,

but when we add the script explorer in debug tool that is not enable? can you pleas let me know th ereason .

Thanks,
Santosh (developer) 7/29/2008 10:33 PM | santosh

# re: Debugging client JavaScript in Visual Studio 2005

Hi

Check if you enabled JavaScrip debugging in your browser. That may be the reason. 7/30/2008 1:57 AM | Lazdy Developer

# re: Debugging client JavaScript in Visual Studio 2005

Hi,

There's a lot of information in this post, and it's helped me a lot to make some progress. With everything here, I can get the Script Explorer to show up, and it finally displays something in it.

The thing is, all it displays is this: "Microsoft Internet Explorer (<machine_name>)". There's nothing to expand, and clicking frantically does nothing. There's not only a .js file in the web project, but there's also java script code embedded in 2 of the 3 pages.

Basically, debugging is still not happening. Please help 8/20/2008 12:15 PM | Tomas

# re: Debugging client JavaScript in Visual Studio 2005

debuging is happening perfeclty..i hv not read al replies but it seems that its not supporting script tags in the page ..it works for all .js files included.

its simply great..it helped me a lot. i am creating page which has 50 dropdowns and each one's items is filtered based on other ddl. whole thing is working at client side only. this debugging saved lot of time of mine.,,

Thanks a lot 8/30/2008 5:34 PM | Nilkanth

Lazy Developer