Ajax Debugging

ASP.NET 2.0 Javascript Debugging Below are some guidelines that I used to debug Ajax javascript using ASP.NET 2.0. Based on the method I believe that it will work with ASP.NET 2003. First I must state that for what ever reason, my system, lack of know-how, or beta products, I could not get the "Script Explorer" to function, any type of breakpoint to function, and except for some immediate window sniffing of the DOM, no actual debugging on client-side script or HTML using ASP.NET 2.0... I could not give up, so I dug and dug. Tested and retested. Finally taking a technique that I learned working with DCOM, VB6 and ActiveX "COM" servers, I succeeded in debugging not only the "javascript", but the "html" as well. I am able to set a breakpoint on a HTML button tag and/or another one in the javascript, then a third in my code-behind "C#" code. Using this technique I can step "F11" thru a Ajax or Script RPC call and watch everything, well almost. Enough of the talk; here is how. PREREQUISITES - Unless you are sure you have the latest Debugger please download the following - Script Debugger for Windows NT 4.0 and Later I know this title sounds at little old, but do not let it fool you, this is the name of the 10th version of “Microsoft’s Script Debugger”. Here is the link to download; http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4569-b3c4dffdf19ccd99&displaylang=en - Install this application, unless you already have V10 -

-

Disable Script Debugging (Internet Explorer) o Go to the Internet Explorer “IE6” Options The advance tab · About 7 options down are two settings o Disable Script Debugging (Internet Explorer) o Disable Script Debugging (Other)

o I clear both of the check boxes, which may not be necessary. o So I basic am telling the IE browser to Enable debugging script You may have to close IE6

- Checking the Debugger Version

-

Open IE6 to your default home page or any page. Look under the View menu and near the bottom you should see “Script Debugger” then as shown below “Open”; I cut/paste this below;

-

Select the Open menu option and you should see a dialog like below:

-

Okay now press the “Yes” button and the Script Debugger opens up, with a dialog showing up as follows;

-

On your system you mat have more selections, just make sure that the “Script” option is selected. Select the “OK” button The web page should load. I was able to set a break point on the “if” statement below.

- Before leaving this screen please check you version by going to the about box. As shown below.

-

-

-

If the above screen looks like the one above then it appears that you have a good setup, notice I stated appears, I have only been using this for a few days, so you never know. Caution: When you ever close the debugger application always any “Yes” or go to the “Debug” menu off of the main menu bar and press “Detach All”, otherwise the debugger is still running. So the next time you use it, it will give you a JIT error and not attach. I have been able to reset it, but not sure what I did.

How To Use: 1 – Load your Ajax ASP.NET project now 2 – Run your WebApp Without the debugger, CTRL+F5 or menu selection, another words you do not want to attach the VS.NET IDE debugger to the application at this time. 3 - Once the Web Page “aspx” has opened, use go to the View menu and open up a Script Debugger session with this Web Page, and set a break point almost anywhere. From HTML input tags, to Javascript or both. The best place to test is off of a button/on_click event. 4 – Minimize this page and if possible make a simple change on the page so keep this page identifiable. 5 – Now Run your app again, but use “F5” as you want the IDE to attach to this 2nd page. Yes you are actually running “2” pages. 5 – Once your page is loaded go ahead and set a breakpoint in your code-behind “VB/C#” which should corresponds with the breakpoint set in #2 above, but remember here you are breaking on the serverside. 6 – What we have done is “Attach” the Microsoft Script Debugger to on Web Page ”aspx” and “Attached” the Visual Studio IDE’s debugger to the 2nd page. So now go back to the 1st page opened in step #2 above and press the button associated with your “breakpoint”. The script debug window will show the breakpoint, and you can press “F11” to step thru the Javascript, stop use Quick watch, then step out and into the Visual Studio IDE’s debugger and into the 2nd breakpoint.

So if this has succeeded for you as it does for me you can now explore this level of debugging. At least on my system, my guess is that for what ever reason the “Debugger” that goes with “Development Environment 8.0” is not installed on my system. Either it was not included with Visual Studio 2005 {Beta 2} or it failed during the installation and I missed it. Let me know how many of you succeed, as this is hot off the plate…