调试Atlas客户端JavaScript脚本javascript

dflying chen

microsoft msn tc

april 2006

english version:http://dflying.dflying.net/1/archive/115_atlas_client_side_javascript_debugging.html

应用于:

microsoft asp.net 2.0

microsoft asp.net atlas march ctp

microsoft visual studio 2005

介绍

编写atlas的javascript脚本将比编写c# 更具有挑战性,因为javascript没有编译时期检查,在编码时候也没有智能感知提示。并且您还需要在运行时跟踪服务器和客户端的网络通信。而且目前还没有一个非常强大的javascript ide可以帮您分担其中繁杂的工作。

我在工作中使用atlas有半年左右,其中积累了一些关于调试atlas程序得知识与经验,希望能与大家分享。其中疏漏之处,还请多多指正。

捕获http通信内容

在任何的ajax程序开发中,监视服务器与客户端的通信内容都是非常重要的。这样您可以得知我实际上像服务器发送了什么以及服务器实际上给我返回了什么。当您的atlas程序遇到问题时,首先要考虑的就是查看一下客户端与服务器端的通信,看看通信的内容是不是您所期盼的。

这里我推荐的工具是fiddler(可以在http://www.fiddlertool.com/fiddler/下载)。fiddler是一个http调试的代理,它可以记录您的计算机和internet之间http通信的全部内容(包括header,cookie,通信内容等),设置断点,修改传入/传出的数据等。fiddler比netmon或achilles等同类软件简单得多,并且提供了一个简单但强大的基于jscript.net的事件的脚本子系统。fiddler支持internet explorer以及其它浏览器。

下面是fiddler的运行时截图:

使用atlas debug helper class

如果您的atlas程序运行在debug模式下,那么atlas会自动为您生成一个debug helper class。 这个debug helper class是一个全局的对象,名称为debug,可以在您代码的任何部位被访问到。使用这个debug对象的方法,您可以在运行时dump一个对象(以可读的形式在页面尾部显示该对象的内部状态),显示trace信息,使用断言(assertion),break到调试器等。如果visual studio的脚本调试器(参见下文)已经attach到了这个internet explorer上,那么visual studio的output窗口也会显示trace信息。

这个debug helper class提供如下方法:

debug.assert(condition, message, displaycaller)

断言condition是否为true。如果condition为false,该方法将显示出message的内容。如果displaycaller为true,该方法将显示出调用者的信息。

debug.cleartrace()

清除trace的输出。

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

以可读的形式在页面尾部显示object对象的内部状态。name值用来显示该对象的名称。如果recursive为true,将递归显示该对象内部的所有被包含的对象的信息。indentationpadding值用来指定输出的每一行的起始文本。

debug.fail(message)

break到调试器中。(仅应用于internet explorer中)

debug.trace(text)

将text参数输出到trace当中。

演示如何使用debug.dump()请见参考文档

将visual studio 脚本调试器attach到internet explorer

您可以使用visual studio脚本调试器来调试您的javascript代码。虽然这个调试器功能有限且有许多bug,不过我觉得它已经是此刻市面上最好的javascript调试器了。您需要安装visual studio 2005以及 internet explorer 6.0或以上版本来使用visual studio脚本调试器。

在默认情况下,internet explorer将忽略所有javascript脚本错误。您需要手动设置一些属性来使internet explorer启用调试功能。打开internet explorer窗口,在tools菜单下选择internet options,在advanced标签中,不要选中disable script debugging (internet explorer)和disable script debugging (other)两项,并选中display a notification about every script error一项。

您需要attach调试器到internet explorer进程上以开始debug。在visual studio中使用f5来启动调试即可。还有一种方法,您可以将visual studio脚本调试器attach到已经在运行的某个internet explorer进程上:在internet explorer的view菜单下,展开script debugger菜单项,选择open。然后在弹出的对话框中选择一个正在运行的visual studio或是另外启动一个visual studio。

脚本调试器使用技巧以及现存bug

调试atlas应用程序时,应该注意以下问题:

当visual studio脚本调试器attach到internet explorer上以后,您可以看到atlas客户端类库将以webresource.axd?...这样的一个资源文件出现在script浏览器中。这是服务器端由microsoft.web.atlas.dll程序集动态生成的。这里已知的一个bug是,在刚刚开始debug的时候visual studio可能阻止你打开这个文件。也就是说当您双击这个文件时候或者是没有任何反应,或者是弹出错误提示。解决方法是先选择打开另外的javascript文件,然后再试一次重新打开,一般就会解决。(注意这个webresource.axd?...是一个很大的文件,需要等待一段时间才能打开。)

visual studio不允许您在aspx文件中的javascript代码中设置断点。解决的方法有三个,一个是从外部的javascript函数中单步跟踪到aspx中的javascript,一旦调试器停在了aspx文件中的javascript,那么您就可以在下面的某一行设置断点了。二是在需要break的地方加上debug.fail(),这样当visual studio脚本调试器break到此处时,您就可以在其它地方设置断点了。三是将您所有的自定义javascript代码放置于外部文件中,并在aspx中进行引用。

visual studio不允许您在一个匿名方法(类似this.func = function())的方法体的第一行设置断点。您可以通过在第一行之前加入一些无意义的代码(例如var a = 3)来使原本的第一行变成第二行,这样即可在第二行设置相应的断点。

在debug的过程中,当您将鼠标移到javascript的某个变量上的时候,可能得到的变量值是错误的,请看如下的截图,提示length为0,实际上应该为10。

此时您应该选中(高亮)从对象到属性的所有语句,然后再将鼠标移到被选中的内容上,即可得到正确的值。请见下图:

有时候在某次debug之后发现internet explorer中的script debugger菜单项消失了,这时您可以重新打开一个internet explorer窗口,即可找回这个丢失的菜单项。

参考资源

http://atlas.asp.net/docs/overview/debug.aspx

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/