Debug Javascript with IE and Visual Studio 2005
January 23rd, 2006
This past week I have spent a good deal of time working on some advanced features with Javascript. Normally when I do Javascript I simply watch the Javascript Console in Firefox and then cross my fingers when I try it in IE. Usually I have good luck with that approach. But I needed more advanced support this time. I was trying to use the Javascript debugger for Firefox named Venkman but I had trouble with it. For some odd reason when I restarted Firefox to reset my session it would not allow me to run Venkman again. Since I did not plan on rebooting my computer just to restart Venkman I had to resort to another option. That lead me to trying the debug features in IE which uses Visual Studio to walk through the code. It was great to see what features I had available to me. Here I will walk through the basics of using these tools.
The first step is to enable script debugging in Internet Explorer. Simply select Tools and then Internet Options. Click on the Advanced tab to see the check boxes for the various options. Unckeck the options which disables script debugging. In IE6 there are two options while previous versions may just have a single option.
Once the option is changed you will need to restart Internet Explorer for the change to take affect. Then go to a page with Javascript you would like to debug. The homepage of my website has a little Javascript on it so I used that. To get into the debugger you can ask IE to break on the next statement. Select View then Script Debugger and then Break at Next Statement.
Then you need to cause it to go to the next statement. My homepage happens to have a Refresh button which calls some Javascript so I click it. That launches the Just-In-Time Debugger which allows me to select multiple available debuggers and I choose Visual Studio 2005.
This brings your focus into Visual Studio on the HTML of the current page. What I want to see is the contents of the Javascript files which are external to the HTML file. So I click the Step Into button to dig into the code until I get to what I want to see.
An interesting part of the code is where I create a new Object named wrapper, so I add that to my Watch list. I can click the plus icon to expand the variable to all of the properties contained within it. This is where the real power of the debugger comes into effect.
Once I have seen what I want to see I can skip through the rest and return to the browser by clicking the Continue button.
But I may want to come back to this code again to see what is happening to the wrapper variable each time. So I can set a Breakpoint. Simply click on the border area to the left of the line you want to mark.
Now I can return to the browser and click the Refresh button again and when it comes across the line with the Breakpoint it will pull Visual Studio in from of the web browser and focus on that line.
October 4th, 2006 at 1:32 am
Thx, helped a lot : )
December 15th, 2006 at 2:57 am
When I do this, Visual Studio barks at me saying "There is no source code available for the current location."
What is that all about...
January 27th, 2007 at 4:59 am
Will thi work with express version? If yes , wish one?
January 29th, 2007 at 9:59 am
You will want to use Visual Web Developer Express. And yes, it will work with a few differences than VS 2005 Pro.
MSDN Walkthrough: Debugging Web Pages in Visual Web
http://msdn2.microsoft.com/en-us/library/z9e7w6cs(VS.80).aspx
February 2nd, 2007 at 4:42 pm
--- Dennis Says: When I do this, Visual Studio barks at me saying “There is no source code available for the current location.” ---
If you start debugging javascript but use a document.write() command, everything on the page is essentially erased except for what results from your document.write() code. In this case, you WILL get the error because you have effectively erased all of the code you are trying to debug... typically you would use a getElementById() function and pair it with the innerHtml method which targets and already existing html element. This way, you can preserve the existing code and append to it rather that completely overwriting it.
February 2nd, 2007 at 4:42 pm
--- Dennis Says: When I do this, Visual Studio barks at me saying “There is no source code available for the current location.” ---
If you start debugging javascript but use a document.write() command, everything on the page is essentially erased except for what results from your document.write() code. In this case, you WILL get the error because you have effectively erased all of the code you are trying to debug... typically you would use a getElementById() function and pair it with the innerHtml method which targets an already existing html element. This way, you can preserve the existing code and append to it rather that completely overwriting it.
March 8th, 2007 at 4:04 am
good
May 10th, 2007 at 12:54 am
Very good!
July 30th, 2007 at 10:20 am
Great thanks!
August 1st, 2007 at 8:25 am
THX a lot!!!!! It definitively helped me solving my problem. I didn't know how to debug javascript and I'm progresivly including more of this scripts in my pages so it was a great help.....
November 6th, 2007 at 2:05 pm
ThanXXXXXXXXXXX A LOT!!!
was of great help to me in resolving extjs.com JS API issues in IE 6.
This is best debugger in absence of anything comparable to Firebug (works only with Mozilla/Firefox browser).
February 10th, 2008 at 5:50 am
G'day,
Thanks very much for this... most helpful!
February 24th, 2008 at 7:36 pm
thx,but is many thinking to do it? I see more