Properly debugging the Javascript

When I started the Major Web Application Project more then a year ago, I would not even dream that I will spent so much time writing and debugging Javascripts. With the new "Web 2.0" era Javascript has become even more represented and important, as well as how to properly integrate Javascript code in you Web Solution.

After spenting hours and hours trying to debug a Javascript without debugger using Alerts and similar "tracing" techniques, and being disappointed on Visual Studio 2005 and the fact that we have year 2007 and we still don't have descent Javascript debugger to use, I was not evan aware how powerful Javascript debugger Visual Studio actually is ... if I was just using it properly.

The most important thing for Debugging the Javascript under Visual Studio is Script Explorer. You can find it when you are in Debug Mode under menu Debug > Windows > Script Explorer.

Once you have the Script Explorer running, you will see all Javascript loaded by Internet Explorer instance that you are currently Attached to. It is VERY IMPORTANT that you open the Javascript files over the Script Explorer and place you Breakpoints there, and not on the Original Javascript file while you are not running web application (as I was used to do so).

After that, you will be able successfuly to debug all used Javascript in you Web Solution ... ofcourse if you have enabled Debugging of Script under Tools > Options menu in Internet Expolrer and used the right technique to integrate your Javascript in Web Solution, what you can read below.

In order to successfuly integrate your Javascripts in Web Solution, I will describe few ways to accomplish that and their positive and negative things

1. Writing the Javascript Code Blocks on the header of your Aspx/Ascx file.
   
   
   

   
   One of mine worst case scenarios because:
   - File loses his overview
   - Whole Javascript code from all controls/pages is rendered on Default Page and can be found under Default Page / Local in Script Explorer
   - Very often it is needed to recompile the whole Project if you have changed Javascript and not Code Behind / HTML in order to get the changes
   
   Positive facts:
   - It always WORKS!
   

2. Including the Javascripts from Code Behind using RegisterScriptBlock, RegisterStartupScript and etc.
   
   
   
   - This method is very easy and useful if you have a small script or method call that needs to be executed.
   - In combination of these methods and Resource Files containing the Javascript, this might be very fast and nice solution.
   
   Negative facts:
   - It is NOT possible to debug.
   
   
3. Exporting the Javascript Code into a separate .js file
   
   
   
   My favorite method because it gives us:
   - Possibility to make "On Running" changes on a .js File without having to restart the Application
   - Every file is separatly showed on Script Explorer and gives as a better overview.
   
   Negative facts:
   - This as well as all other techniques, how to integrate Javascript code/files in you Web Application, are having problems by dynamical loading of a control/pages or in combination with Update Panels. This doesn't have to be in direct connection with Visual Studio Debugger, but more possible with the way that Internet Explorer is working with the Javascripts.

I really hope that I could save your time and help you to use the Javascript smarter in future, just as I am enoying in debugging of Javascripts now