Debug the Atlas client JavaScript script __java

Apply to:

Microsoft asp.net 2.0
Microsoft asp.net Atlas March CTP
Microsoft Visual Studio 2005


Introduced

Writing a JavaScript script for Atlas will be more challenging than writing C # because JavaScript has no compile-time checks and no IntelliSense hints when coding. And you also need to keep track of network traffic between the server and the client at run time. And there is not a very powerful JavaScript IDE that can help you share the intricacies of the work.

I have been working with Atlas for about half a year, and have accumulated some knowledge and experience in debugging the Atlas program, and I hope to share it with you. One of the omissions, but also please correct the point.


Capturing HTTP communication content

In any development of AJAX programs, monitoring the communication between the server and the client is very important. This way you can tell what I actually sent as a server and what the server actually returned to me. When your Atlas program encounters a problem, the first thing to consider is to look at the client-server side of the communication and see if the content of the communication is what you expect.

The tool I recommend here is Fiddler (which can be downloaded in http://www.fiddlertool.com/fiddler/). Fiddler is a proxy for HTTP debugging, which records the entire contents of HTTP communications between your computer and the Internet (including Header,cookie, communication content, etc.), sets breakpoints, modifies incoming/outgoing data, and so on. Fiddler is much simpler than similar software such as Netmon or Achilles, and provides a simple but powerful scripting subsystem for JScript.NET based events. Fiddler supports Internet Explorer and other browsers.

The following is a screenshot of Fiddler's Run Time:



Using the Atlas Debug Helper Class

If your Atlas program is running in debug mode, Atlas will automatically generate a debug Helper Class for you. This debug Helper class is a global object, named Debug, that can be accessed anywhere in your code. Using this Debug object's method, you can dump an object at run time (display the internal state of the object in readable form at the end of the page), display trace information, use assertions (assertion), break to the debugger, and so on. If the Script Debugger for Visual Studio (see below) has been attach to this Internet Explorer, Visual Studio's Output window also displays trace information.

This debug Helper class provides the following methods:
Debug.Assert (condition, message, Displaycaller) asserts that condition is true. If condition is false, the method displays the contents of the message.  If Displaycaller is true, the method displays the caller's information.  Debug.cleartrace () Clears the output of trace. Debug.dump (object, name, recursive, indentationpadding) displays the internal state of an object at the end of the page in a readable form. The name value is used to display the names of the objects. If recursive is true, recursively displays information about all the contained objects inside the object.  The indentationpadding value is used to specify the starting text for each row of the output. Debug.fail (message) to the debugger. (Applied to Internet Explorer only) debug.trace (text) prints the text parameter to trace.
show how to use Debug.dump () see the reference documentation


Attach the visual Studio Script Debugger to Internet Explorer

You can use the Visual Studio Script Debugger to debug your JavaScript code. Although the debugger is limited and has a lot of bugs, I think it's already the best JavaScript debugger on the market at the moment. You need to install Visual Studio 2005 and Internet Explorer 6.0 or above to use the Visual Studio Script Debugger.

By default, Internet Explorer ignores all JavaScript script errors. You need to set some properties manually to enable Internet Explorer to turn on debugging. Open the Internet Explorer window, select Internet Options under the Tools menu, and in the Advanced tab, do not select disable Script debugging (Internet Explorer) and disable script debugging (other), and select display a notification about every script error.

You need to attach the debugger to the Internet Explorer process to start Debug. Use F5 in Visual Studio to start debugging. There is also a way you can attach the Visual Studio Script Debugger to an Internet Explorer process that is already running: Under the View menu of Internet Explorer, expand the Script Debugger menu item, Select Open. Then select a running Visual Studio in the pop-up dialog box or start a different Visual Studio.



Scripting Debugger usage tips and existing bugs

When you debug your Atlas application, you should be aware of the following issues:

1. After the Visual Studio Script Debugger attach to Internet Explorer, you can see that the Atlas Client class library will be WebResource.axd?... Such a resource file appears in the script browser. This is dynamically generated by the server driven by Microsoft.Web.Atlas.dll assembly. One of the bugs known here is that at the beginning of debug
Visual Studio may prevent you from opening this file. That is, when you double-click the file, there is no response, or a pop-up error message. The workaround is to first choose to open another JavaScript file and then try again to reopen it, which is generally resolved. (Note the WebResource.axd?... is a large file that needs to wait a while before it can be opened. ）

2.Visual Studio does not allow you to set breakpoints in JavaScript code in an ASPX file. There are three solutions, one from an external JavaScript function stepping into JavaScript in aspx, and once the debugger stops in JavaScript in the ASPX file, you can set a breakpoint on one of the following lines. The second is to add Debug.fail () where the break is needed, so that when the Visual Studio Script Debugger breaks here, you can set breakpoints elsewhere. Three is to place all your custom JavaScript code in an external file and refer to it in ASPX.

3.Visual Studio does not allow you to set a breakpoint on the first line of the method body of an anonymous method (similar to This.func = function ()). You can set the appropriate breakpoint in the second row by adding meaningless code (such as var a = 3) to the first line to make the first row a second line.

4. In the process of debug, when you move the mouse over a variable in JavaScript, the possible variable value is wrong, please see the screenshot below, tip length is 0, in fact, should be 10.


At this point you should select (highlight) All statements from the object to the attribute, and then move the mouse over the selected content to get the correct value. Please see the following figure:


5. Sometimes the Script Debugger menu item in Internet Explorer disappears after a debug, and you can reopen an Internet Explorer window to retrieve the missing menu item.

Reference Resources

Http://atlas.asp.net/docs/Overview/debug.aspx