Debugging Tips for the Atlas application

Program | Tips the "Atlas" program consists of server-side code and client code, and the browser may want to request some data asynchronously. So, how can you debug such a Web program? This article will show you how to use some techniques and tools to do this conveniently.

Note:

In addition to Visual Studio and Internet Explorer, the procedures mentioned in this article are Third-party, and Microsoft will not provide support. Please go to the homepage of these tools to read the authorization and support information.

For better debug, configure the application first

To enable the debug feature of VS, add a <compilation> element in the Web.config file in the site root, and set the Debug property to True. See, ASP.net Settings Schema, compilation element

<configuration>
<system.web>
<compilation debug= "true" >
!--etc.-->
</compilation>
</system.web>
<configuration>


When Degub is enabled, "Atlas" uses a debug script class that provides additional dialog information and a debug help class that will be explained below.

tracing on the server side

If you enable "partial rendering" Server-side tracing to the debug page (that is, the page contains a enablepartialrendering-enabled ScriptManager and a mode-conditional UpdatePanel), Then you can use the Trace view (Trace.axd) to display the page output root trace information. At this point, you can see that the trace output is displayed at the end of the page at the beginning of the page, but the information is not updated after the asynchronous postback, because only the UpdatePanel content needs to be updated when it changes. For more information about using the trace viewer, see asp.net trace.

Capturing HTTP Interactions

When developing Web applications, it is useful to observe HTTP interactions between the server and the client, and there are two tools that can help us do this:

Fiddler. This tool works by making a log of all HTTP interactions under a proxy. It supports IE and other browsers. With fiddler, you can detect each request and response, including headers,cookies, and HTTP message body content.

Web Development Helper. This tool can only be used for IE, but it also records HTTP interactions in the log, can view the HTML DOM, displays trace information in a separated window, closes the application, and decodes the view state of the page.

Debug Helper Class

When you compile your application with debug enabled, the Atlas client class library defines a debugging helper class and instantiates a global debug object for use. Using this Debug object, you can display the object's information in a readable way at the end of the page, showing trace messages, using assertions, and interrupting. If you are attaching to the IE process using the VS debugger, you can also view the trace information in the Output window.

The following code displays information about the output of an object:


var o = {
Colors: {
Red: [255, 0, 0],
Green: [0, 255, 0],
Blue: [0, 0, 255]
},
width:600,
Title: ' Debugging with ' Atlas '
};

Debug.trace ("Output trace Messages");
Debug.dump (o, ' object name ', true, ');




Output:

Output Trace Messages
... object name {object}
... +colors {Object}
... ++red {Array}
... +++[0]: 255
... +++[1]: 0
... +++[2]: 0
... +++0:255
... +++1:0
... +++2:0
... ++green {Array}
... +++[0]: 0
... +++[1]: 255
... +++[2]: 0
... +++0:0
... +++1:255
... +++2:0
... ++blue {Array}
... +++[0]: 0
... +++[1]: 0
... +++[2]: 255
... +++0:0
... +++1:0
... +++2:255
... +width:600
... +title:debugging with "Atlas"

The Debug class provides the following methods for use:

Debug.Assert (condition, message, Displaycaller)

Determines whether the condition parameter is true. If False, this method displays the message argument using a message box. If the Displaycaller parameter is true, then the caller's information will also be displayed.

Debug.cleartrace ()

Empty the output.

Debug.dump (object, name, recursive, indentationpadding)

Displays information about an object in a readable manner at the end of the page. The Name property is used to display as a label (equal to a caption before displaying the information for a large segment of the object), and if Recursive is true, then the information for the object in the object is also recursively displayed. Indentationpadding is used to populate the beginning of each line of information and to act as an indentation.

Debug.fail (Message)

Interrupts the debugger (Internet Explorer only).

Debug.trace (text)

Prints the text to trace.

Configuring Internet Explorer

Internet Explorer normally ignores any problems it encounters in JavaScript. To enable debugging, from the Tools menu, select Internet Options. By default, IE ignores JavaScript errors.　To support debug, open IE's Tools menu, select Internet Options, and on the Advanced Options page, clear disable Script debugging (Internet Explorer) and disable Select the script debugging (other) check box and select Display a nofication about every script error. The results are shown in the following illustration:



attaching the Visual Studio debugger to Internet Explorer

To debug client code, you must attach a debugger to the IE process. When you start debugging an application using the F5 or start debugging command in VS, the debugger is automatically attached to the IE process.

Of course, you can also attach the VS debugger to a running application. You can do this, in the Debug menu, select Attach to process ..., in the Attach to Process object box, select the run instance of IE that you want to attach the debugger to.

Note:

If IE is properly configured with the debug option, you will see the script,x86 option in the Type column in the dialog box for attaching the debugger to the IE instance process, and if you only see the x86 option, check your IE configuration.

When the appropriate script debugging configuration for IE, if IE encounters a script error, and no one is attached to a debugger at this time, a dialog box is displayed asking if you want to select a debugger to attach to the current IE process for debugging. You can choose not to attach and continue running the program, or you can attach a debugger to step through the current scripting code.

some known problems and solutions for IE debugging

When the VS debugger is attached to IE, you can see a list of debugged scripts in the VS Script Exlorer window (select Windows-->script Explorer in the Debug menu). The dynamically generated Atlas script library from Microsoft.Web.Atals.dll will act as a WebResource.axd?... The beginning resource rendering. A known vs bug will prevent you from opening the file in the first if you try to open this file, vs displays an error message or when you double-click the file name to open the file, there is no response at all, you can open a different JavaScript file and then open it.

Before the debugger steps into the code of a asp.net page, vs does not allow you to set a breakpoint on the <script> element in this page. One solution is to set a breakpoint at the method call and then step into the code of the page, and the debugger stops on a line of the page's scripting code, and you can set the breakpoint correctly. Another way for a debugger to recognize a script in a page is to call the Debug.fail () method in one of the methods in the paging file. When you call this method, the debugger stops at the place where Debug.fail () is invoked, and then you can set breakpoints anywhere else. The third way is to put all your scripts in an external JavaScript file (. js file).

VS allows you to set a breakpoint on the first line of a traditional JavaScript function, but not in the anonymous method used in "Atlas". If the anonymous method has only one line of code, or you want to set a breakpoint on the first line, you can insert a line of empty code before the first line of the method, and then set a breakpoint on the second line.

Firefox

Firefox is not integrated into the VS debugger, so you cannot step into debugging client code with the VS debugger. However, you can use the Venkman debugger, which is a plugin for Firefox, and another useful tool called Web Developer Extension, which lets you view the DOM and CSS styles.

Fiddler can also work with Firefox. However, you must configure Firefox for your native 8888 Port routing http request, please refer to configuring Clients