在IE中调试客户端JavaScript脚本

在IE中调试客户端JavaScript脚本

标签： 脚本  调试  WEB  2.0  JavaScript 

使用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提供如下方法：
   1.debug.assert(condition, message, displayCaller) 断言condition  是否为true。如果condition为false，该方法将显示出message的内容。如果displayCaller为true，该方法将显示出调用者的信息。 
   2.debug.clearTrace() 
     清除trace的输出。 
   3.debug.dump(object, name, recursive, indentationPadding) 
     以可读的形式在页面尾部显示object对象的内部状态。name值用来显示该对 象的名称。如果recursive为true，将递归显示该对象内部的所有被包含的对象的信息。indentationPadding值用来指定输出的每一行的起始文本
   4.debug.fail(message) 
    Break到调试器中。（仅应用于Internet Explorer中） 
   5.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应用程序时，应该注意以下问题：

1. 当Visual Studio脚本调试器attach到Internet Explorer上以后，您可以看到Atlas客户端类库将以WebResource.axd?...这样的一个资源文件出现在Script浏览器中。这是服务器端由Microsoft.Web.Atlas.dll程序集动态生成的。这里已知的一个bug是，在刚刚开始debug的时候Visual Studio可能阻止你打开这个文件。也就是说当您双击这个文件时候或者是没有任何反应，或者是弹出错误提示。解决方法是先选择打开另外的JavaScript文件，然后再试一次重新打开，一般就会解决。（注意这个WebResource.axd?...是一个很大的文件，需要等待一段时间才能打开。）
2. Visual Studio不允许您在ASPX文件中的JavaScript代码中设置断点。解决的方法有三个，一个是从外部的JavaScript函数中单步跟踪到ASPX中的JavaScript，一旦调试器停在了ASPX文件中的JavaScript，那么您就可以在下面的某一行设置断点了。二是在需要break的地方加上debug.fail()，这样当Visual Studio脚本调试器break到此处时，您就可以在其它地方设置断点了。三是将您所有的自定义JavaScript代码放置于外部文件中，并在ASPX中进行引用。
3. Visual Studio不允许您在一个匿名方法（类似this.func = function()）的方法体的第一行设置断点。您可以通过在第一行之前加入一些无意义的代码（例如var a = 3）来使原本的第一行变成第二行，这样即可在第二行设置相应的断点。
4. 在debug的过程中，当您将鼠标移到JavaScript的某个变量上的时候，可能得到的变量值是错误的，请看如下的截图，提示length为0，实际上应该为10。
   
   此时您应该选中（高亮）从对象到属性的所有语句，然后再将鼠标移到被选中的内容上，即可得到正确的值。请见下图：
   
5. 有时候在某次debug之后发现Internet Explorer中的Script Debugger菜单项消失了，这时您可以重新打开一个Internet Explorer窗口，即可找回这个丢失的菜单项。