Programmer Dflying | Atlas Client Side JavaScript Debugging

Atlas Client Side JavaScript Debugging

Dflying | 09 April, 2006 20:36

Introduction

It is much more challenging to write Atlas code than C# code, for there’s no compile time check or IntelliSence in coding, and you have to trace the traffic between the client and server in runtime. Still there’s no powerful IDE/debugger for JavaScript.

I’ve been working on Atlas for about half a year, and in this post I want to share some of my knowledge and experiences about Atlas debugging issues to make life easier.

Capturing HTTP Traffic

In AJAX applications, it is very useful to monitor the HTTP traffic going back and forth between the server and the client. Thus you can find what exactly I sent to server and what the server returned to me. Basically this is often used in verify the data send by XMLHttpRequest.

The tool I recommend is Fiddler (downloaded at http://www.fiddlertool.com/fiddler/ ), which is a HTTP Debugging Proxy which logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic (including headers, cookies, and the message contents), set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler is designed to be much simpler than using NetMon or Achilles, and includes a simple but powerful JScript.NET event-based scripting subsystem. It supports Internet Explorer and other browsers.

Fiddler screen shot:

Using Atlas Debug Helper Class
Atlas framework will define a Debug Helper Class for you if you are running your Atlas application in debug mode. The Debug Helper Class is accessible as a global object: debug. Using methods of the debug class, you can dump a runtime JavaScript object (display objects in readable form at the end of the page), show trace messages, use assertions, and break into the debugger. If the Visual Studio Script Debugger (see below) is attached to Internet Explorer, you will also see the trace messages in the Output window.

The debug class provides following methods:

debug.assert(condition, message, displayCaller)
Asserts that the condition parameter is true. If condition is false, the method displays a message box with the text from message. If displayCaller is true, the method also displays information about the caller.
debug.clearTrace()
Erases the trace output.
debug.dump(object, name, recursive, indentationPadding)
Displays object in readable form at the end of the page. The name value is used as a label for the object dump. If recursive is true, objects inside of object are shown recursively. The indentationPadding value is a string that is inserted at the beginning of each line of output.
debug.fail(message)
Breaks into the debugger (Internet Explorer only).
debug.trace(text)
Writes the text argument to the trace output.

Here’s a piece of demo code copied from Atlas online document shows debug.dump():

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"

Attaching the Visual Studio Script Debugger to Internet Explorer

You can use the Visual Studio Script Debugger to debug your JavaScript code, thought it is far from perfect and full of bugs, it is still the best JavaScript debugger at this moment I think. To use Visual Studio Script Debugger, you have to install Visual Studio 2005 and Internet Explorer 6.0 or above.

Internet Explorer normally ignores any problems it encounters in JavaScript. To enable debugging, from the Tools menu, select Internet Options. In the Advanced tab, clear the Disable Script Debugging (Internet Explorer) and Disable Script Debugging (Other) check boxes, and select the Display a notification about every script error. To support debugging, the option settings should look as follows:

To debug client code, you must attach a debugger to Internet Explorer. When you start your application for debugging from Visual Studio using F5 or the Start Debugging command on the Debug menu, the debugger is attached automatically.

Alternatively, you can attach the Visual Studio debugger to Internet Explorer after the application is already running. To do so, from View menu of Internet Explorer, expend Script Debugger menu item, select Open.

Visual Studio Script Debugger Bugs and Tricks

When debugging "Atlas" applications, be aware of the following issues and workarounds:

After the Visual Studio debugger is attached to Internet Explorer, you can see the "Atlas" client library will appear as a resource beginning with WebResource.axd?..., which the server generates dynamically from the Microsoft.Web.Atlas.dll assembly. A known bug in Visual Studio might initially prevent you from opening the file. If Visual Studio displays an error message to that effect, or if it ignores a double click on the file name, select and open a different JavaScript file first, and then try again (Note it is a big file and may need a while to open it).
Visual Studio does not allow you to set breakpoints in JavaScript code inside <script> elements in an ASP.NET Web page until the debugger has stepped into JavaScript code on that page. To work around this issue, set the breakpoint on the function the call comes from, and step into the code on the aspx page. After the debugger has stopped on a line of JavaScript code in an aspx file, you can set breakpoints normally. Another way to get the debugger to recognize scripts in an aspx file, is to create a method in the aspx file that calls debug.fail(). When you call this method, the debugger will stop on the call to debug.fail() and let you set breakpoints elsewhere. A third alternative is to place all your custom code in external JavaScript files.
Visual Studio allows you to set breakpoints on the first line of a regular JavaScript function, but not on the first line of anonymous methods, which "Atlas" uses. If an anonymous method contains only one line of code, or if you must set a breakpoint on the first line of an anonymous method, insert a dummy line of code and then set the breakpoint on the second line of the method.
When you check the variables in debugging, you may find it may show you the wrong value, check following screen shot.

You can get rid of it by highlighting the whole object and property syntax, then move your cursor on the highlighted content. Everything’s ok in the following screen shot.
Sometimes you can not find the Script Debugger menu item in Internet Explorer, just close current window and reopen a new one, you may find the Script Debugger menu again.