Atlas应用程序调试技巧

本文为翻译文章，原文地址：http://atlas.asp.net/docs/Overview/debug.aspx

“Atlas”程序由服务器端代码和客户端代码组成，并且，浏览器可能会要去异步请求一些数据。那么，怎样才能Debug这样的web程序呢。本文将告诉你如何使用一些技术和工具来方便的完成这件事。

注：
除了Visual Studio和Internet Explorer，本文提及的一此程序是一些第三方的，微软不会提供支持的。请到这些工具的主页去阅读授权和支持信息。

为了更好的Debug，先对应用程序进行配置

要启用VS的Debug功能，请添加一个<compilation>元素在站点根目录的web.config文件中，并且设置debug属性为true。请参阅，ASP.NET Settings Schema, compilation element

<system.web>

</compilation>

</system.web>

当Degub启用后，“Atlas”会使用一个Debug脚本类，这个类库将提供附加的对话信息和一个下面将讲解的Debug帮助类。

在服务器端进行Tracing

如果你通过启用“partial rendering”进行服务器端Tracing来Debug页面（即页面中包含一个启用了EnablePartialRendering的ScriptManager和一个Mode为Conditional的UpdatePanel），那么你可以使用Trace视图（Trace.axd）来显示页面输出根踪信息。此时，你可以在页面一开始呈现时就看到根踪输出信息显示在页面的尾部，但是这些信息不会在异步Postback后进行更新，这是因为仅仅只有UpdatePanel的内容需要在变化时被更新。关于使用Trace viewer的更多信息，请参看 ASP.NET Trace.

捕获HTTP交互

当开发web应用时，观察服务器与客户端来回往返的HTTP交互是很有用的，有两个工具可以帮助我们干这件事：

Fiddler. 这个工具工作原理是做为一个Proxy记录下所有HTTP交互的日志。它支持IE和其它的浏览器。使用Fiddler，你可以检测每个请求和响应，包括headers,cookies,和HTTP消息主体内容。
Web Development Helper. 这个工具只能用于IE，但是它除了在日志中记录HTTP交互，还能查看HTML　DOM，在一个分隔开了的窗口中显示trace信息，关闭应用，还能解码页面的View state。

Debug Helper类

当你在启用了Debug后编译你的应用程序，“Atlas”客户端类库会定义一个Debugging helper类，并且实例化一个全局的debug对象供使用。使用这个debug对象，你能在页面的尾部用易读的方式显示对象的信息，能显示trace messages,能使用断言，中断。如果你使用VS调试器附加到IE进程中，你也可以在Output窗口中查看跟踪信息。
下面的代码将显示输出一个对象的信息：

var o = {

colors: {

red: [255, 0, 0],

green: [0, 255, 0],

blue: [0, 0, 255]

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
... + 600
... +title: debugging with "Atlas"

debug类提供了以下这些方法供使用：
debug.assert(condition, message, displayCaller)
        判断condition参数是不是为true.如果为false，这个方法将使用一个Message box显示message参数。如果        displayCaller参数为true,那么调用者的信息也将显示出来。
debug.clearTrace()
    清空输出.
debug.dump(object, name, recursive, indentationPadding)
    在页面最后用易读的方式显示一个对象的信息。name属性用于在显示时作为显示的标签（等于是作为显示一大段对象的信息前作一个标题的作用），如果recursive为true,那么这个对象中的对象的信息也会递归显示出来。indentationPadding用于填充在每一行信息的起始处，起一个缩进的作用。
debug.fail(message)
    中断调试器 (仅Internet Explorer).
debug.trace(text)
    将text输出到trace.

对Internet Explorer进行配置

Internet Explorer normally ignores any problems it encounters in JavaScript. To enable debugging, from the Tools menu, select Internet Options. 默认情况下，IE会忽略掉JavaScript错误。为了支持Debug，请打开IE的Tools菜单，选择Internet Options，在Advanced选项页，清除Disable Script Debugging（Internet Explorer）和Disable　Script　Debugging（Other）复选框的选择，并选中Display a nofication about every script error.结果如下图所示：

将Visual Studio调试器附加到Internet Explorer

要调试客户端代码，你必须把一个调试器附加到IE进程去。当你在VS中使用F5或Start Debugging命令启动调试一个应用程序时，调试器会被自动的附加到IE进程。
当然你也可以把VS的调试器附加到一个正在运行中的应用程序。你可以这样来做，在Debug菜单，选择Attach to Process...，在Attach to Process对象框中，选择你想要附加调试器的IE的运行实例。

注:
如果IE被合适的配置了Debug选项，在附加调试器到IE实例进程的对话框中的类型列中，你将会看到Script,x86选项，如果你只看到x８６选项，那么请检查你的IE配置。

当为IE进行了合适的脚本调试配置后，如果IE遇到一个脚本错误，而此时没有附加进来一个调试器，这时就会显示一个对话框，询问你是否要选择一个调试器附加到当前IE进程进行调试。你可以选择不附加而继续运行程序，也可以附加一个调试器步进调试当前的脚本代码。

一些已知的IE调试的问题和解决方案

      当VS调试器被附加到IE后，你可以在VS的Script Exlorer窗口中看到一个被调试的脚本的列表，（在Debug菜单中选择Windows-->Script Explorer）。从Microsoft.Web.Atals.dll中动态生成的Atlas的脚本库会作为一个以WebResource.axd?...开头资源呈现.一个已知的VS的bug会阻止你一开始就去打开这个文件，如果你在尝试打开这个文件时，VS显示出一个错误信息或当你双击这个文件名去打开这个文件时根本就没有反应，你可以先打开一个别的JavaScript文件，再去打开它。
      在调试器步进到一个Asp.net页面的代码中前，VS不允许你在这个页面中的<script>元素中设置一个断点。解决办法之一是设一个断点在方法调用处，然后步进到这个页面的Code中来，最后调试器停在该页的脚本代码的一行中，这时，你就可以正常的设置断点了，另外一种让调试器能识别页面中脚本的方法是在页面文件中的一个方法中调用debug.fail()方法。当你调用这个方法时，调试器就会停止在调用debug.fail()的地方，然后，你就可以在任何其它地方设置断点了。第三种方法是把你写的所有脚本放在一个外部的JavaScript文件中（.js文件）。
      VS允许你在一个传统的JavaScript函数的第一行设置一个断点，但在“Atlas”使用的匿名方法中不行。如果匿名方法只有一行代码，或你本来就想在第一行设断点，这时，你可以在这个方法的第一行前插入一行空代码，然后在第二行设断点。

Firefox

Firefox没有集成到VS的调试器中，所以你不能用VS调试器步进调试客户端代码。不过,你可以使用 Venkman 调试器, 它是Firefox的一个插件,还有另一个很有用的工具叫 Web Developer Extension, 它能让你查看DOM和CSS 样式.
Fiddler也能工作于Firefox.但是，你必须配置Firefox对于你本机８８８８端口路由HTTP请求，更多信息，请查阅 Configuring Clients