Atlas application debugging skills

The original Article address: http://atlas.asp.net/docs/Overview/debug.aspx

The "Atlas" program consists of server-side code and client code, and the browser may need to request some data asynchronously. So, how can we Debug such web programs. This article will show you how to use some technologies and tools to conveniently complete this task.

Note:
Apart from Visual Studio and Internet Explorer, this program mentioned in this article is not supported by Microsoft. Go to the homepage of these tools to read the authorization and support information.

Configure the application for better debugging.

To enable the Debug function of VS, add a <compilation> element in the web. config file of the site root directory and set the debug attribute 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. This Class Library provides additional dialog information and a Debug help class that will be explained below.

Tracing on the server

If you enable "partial rendering" for server-side Tracing to Debug the page (that is, the page contains a ScriptManager with EnablePartialRendering enabled and an UpdatePanel with Conditional Mode ), you can use the Trace view (Trace. axd) to display the page output root trace information. At this point, you can see the root trace output information displayed at the end of the page at the beginning of the page, but this information will not be updated after asynchronous Postback, this is because only UpdatePanel content needs to be updated when it changes. For more information about using Trace viewer, see ASP. NET Trace.

Capture HTTP Interaction

When developing a web application, it is very useful to observe the HTTP interaction between the server and the client. There are two tools to help us do this:

Fiddler. This tool works as a Proxy to record all HTTP interaction logs. 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 in addition to recording HTTP interaction in logs, it can also view html dom, display trace information in a separate window, and close the application, you can also decode the View state of the page.

Debug Helper class

When you compile your application after Debug is enabled, the "Atlas" client class library defines a Debugging helper class and instantiate a global debug object for use. With this debug object, you can display the object information in a readable manner at the end of the page, display trace messages, and Use assertions to interrupt. If you use the VS debugger to attach to the IE process, you can also view the tracing information in the Output window.
The following code displays the information of an object:

Var o = {
Colors :{
Red: [255, 0, 0],
Green: [0,255, 0],
Blue: [0, 0,255]
},
Width: 600,
Title: 'destgging 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)
Determine whether the condition parameter is true. If it is false, this method displays the Message Parameter Using a message box. If the displayCaller parameter is true, the caller information is displayed.
Debug. clearTrace ()
Clear output.
Debug. dump (object, name, recursive, indentationPadding)
Display the information of an object in a readable manner at the end of the page. The name attribute is used as the label to be displayed during display (equivalent to the title before the information of a large object is displayed). If the recursive attribute is true, the object information in this object will also be displayed recursively. IndentationPadding is used to fill in the beginning of each line of information, acting as an indent.
Debug. fail (message)
Interrupt the debugger (Internet Explorer only ).
Debug. trace (text)
Output text to trace.

Configure 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 the Tools menu of IE and select Internet Options. On the Advanced Options page, clear the Options of the Disable Script Debugging (Internet Explorer) and Disable Script Debugging (Other) check boxes, select Display a nofication about every script error. the result is shown in:

 

Attach the Visual Studio debugger to Internet Explorer

To debug the client code, you must append a debugger to the IE process. When you use the F5 or Start Debugging command in VS to Start Debugging an application, 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 IE running instance you want to Attach the debugger.

Note:
If the Debug option is properly configured for IE, you will see the Script and x86 options in the type column in the dialog box that attaches the debugger to the IE instance process. If you only see the x86 options, check your IE configuration.

After an appropriate script debugging configuration is performed for IE, if IE encounters a script error and is not appended with a debugger, a dialog box is displayed, ask if you want to select a debugger to attach to the current IE process for debugging. You can choose not to append the program, or you can append a debugger to debug the current script code step by step.

Some known IE debugging problems and solutions

After the VS debugger is attached to IE, you can see a list of debugged scripts in the Script Exlorer window of VS (select Windows --> Script Explorer in the Debug menu ). The Atlas script library dynamically generated from Microsoft. Web. Atals. dll serves as a WebResource. axd ?... Starts with resource rendering. A known VS bug will prevent you from opening the file at the beginning. If you try to open this file, VS displays an error message or does not respond when you double-click the file name to open the file. You can open another JavaScript file first and then open it.
Before the debugger goes into the code of an Asp.net page, VS does not allow you to set a breakpoint in the <script> element on this page. One solution is to set a breakpoint at the method call, then step into the Code on this page, and finally the debugger stops in a line of the script Code on this page, you can set breakpoints normally. Another way for the debugger to recognize scripts on the page is to call debug in a method in the page file. fail () method. When you call this method, the debugger stops calling debug. fail (), and then you can set breakpoints anywhere else. The third method is to put all your scripts in an external JavaScript file (. js file ).
VS allows you to set a breakpoint in the first line of a traditional JavaScript function, but not in the anonymous method used by "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, set a breakpoint in the second line.

Firefox

Firefox is not integrated into the VS debugger, so you cannot use the VS debugger to debug client code step by step. However, you can use the Venkman debugger, a plug-in of Firefox, and another useful tool called Web Developer Extension, which allows you to view DOM and CSS styles.
Fiddler can also work in Firefox. However, you must configure Firefox to route HTTP requests to port 8888 on your local machine. For more information, refer to login ing Clients.