VS2008中JavaScript编辑调试器的秘密

 JavaScript已经发展成为进行Web客户端编程的标准语言。它有大量的语言资源,但是对开发的支持并不完备。大多数使用JavaScript的开发人员更倾向于用原来的方法进行调试,但是现在有很多工具来减轻测试和调试的负担。
  Visual Studio 2008将是一个非常激动人心的版本,包含了成堆的强大的功能。其中一个新特性就是更加完善的支持对JavaScript的调试及IntelliSense功能。Visual Studio 2008其实是开发JavaScript程序最优秀的IDE,对JavaScript的代码诱导能力最强,而且还可以进行断点跟踪调试调试。在本文中,将展示的这两方面的特性,希望为JavaScript的编辑及调试带来新开发方式,但愿读者能寻找到一款更好的JavaScript开发工具。

  一、 JavaScript 智能感知(Intellisense)功能

  Java、C#等各种高级语言的开发工具琳琅满目,争放异彩。但作为AJAX的主角的JavaScript语言,配套的开发工具总保持着不相称的沉寂。缺乏良好开发工具的支持,编写JavaScript程序,特别是超过500行以上的JavaScript程序变得极富挑战性——没有代码诱导功能,没有实时错误检查,没有断点跟踪调试……开发JavaScript代码有时就像在黑暗的隧道里靠触觉摸索着前行。在代码中不小心增加了一个多余的“(”或“{”,整段代码可能马上像一堵猝然倒塌的城墙,在IE中报出的错误往往似是而非,甚至和真实原因往往相差十万八千里,让人如堕云里雾里。好事者引用柳传志的话,概括编写JavaScript程序的感受:战战兢兢,如履薄冰。

  (1) 无处不在的Intellisense功能

  开发人员对Visual Studio 2008中一个殷切期盼的特性是,Visual Studio 2008对客户端JavaScript Intellisense的支持,当然这个特性在免费的Visual Web Developer Express版本中也能正常的工作。

  Visual Studio 2008的JavaScript IntelliSense功能类似其他IDE中的Auto-completion,也就是能够自动补全,不过和VI和Emacs中的Auto-completion不一样,IntelliSense比较Intelligent,根据编程语言的语法来谈出备选填。

  如果读者以前曾为手工键入JavaScript感到烦恼的话,那肯定会为Visual Studio 2008的这个特性感到惊喜。Visual Studio 2008 为所有的.aspx 文件、.htm 文件以及外部的.js 文件中都提供完整的JavaScript Intellisense自动完成功能。它不仅对普通的JavaScript代码提供了Intellisense ,还对新的ASP.NET AJAX 客户端JavaScript框架和用它编写的JavaScript代码提供了丰富的支持。

  (2) 外部JS文件的Intellisense功能

  Visual Studio 2008中的JavaScript Intellisense支持之酷处在于,它被设计成开箱即可用(Just work out of the box)的。这意味着,开发人员不需要对JavaScript文件运行别的工具来建立Intellisense提示,也不用以某种方式来修饰JavaScript。如果在外部JavaScript文件中建有一个标准的JavaScript函数或原型类型,那么Visual Studio 2008中使用它时,就应该自动得到Intellisense完成。

  很明显,当外部JS文件具在Intellisense功能时,开发人员就可以像使用内部的JavaScript语句块一样进行调用。如此一来,就可以自动调用外部JS文件中定义的JavaScript函数及变量。

  例如,如下图所示,在些在文件中引用了两个.js文件

  VS2008中JavaScript编辑调试器的秘密(图一)
点击查看大图


  于是,在MyLibrary.js文件中即可以调用Util.js文件中定义的方法了。当然,也可以让Visual Studio 2008让Util.js具有Intellisense功能。只需在MyLibrary.js文件的最顶部加入注释即可。

  VS2008中JavaScript编辑调试器的秘密(图二)

  (3) JavaScript文档注释

  Visual Studio 2008还允许开发人员可选择性地在代码/库中添加文档注释,来进一步帮助Intellisense 引擎,以及允许开发人员提供文档注释,Visual Studio Intellisense引擎可以收集这些注释,用作摘要注释和类型描述/验证检查。

  譬如,如果开发人员可以把如下的注释添加到getMessage函数:

  VS2008中JavaScript编辑调试器的秘密(图三)

  当在Default.aspx中进行编码时,Visual Studio 2008会自动的显示getMessage函数的相关信息。Visual Studio 会自动显示摘要的细节,以及在健入参数值时提供行内的帮助。

  除了以上的基本JavaScript注释功能之外,ASP.NET AJAX也使用文档摘要注释的格式。两者都可以:

  给类、方法、参数添加摘要细节;本地化JavaScript中的文档;当一个外部JavaScript 文件引用另一个外部JavaScript 文件后,在使用前一个外部JavaScript文件时,让它的Javascript Intellisense认为,另外文件中的方法和类型在当前的范围内。

  ASP.NET AJAX 控件工具包现在也拥有了内置的MSBuild任务,可以将其加到web项目里,该任务可以在项目以“发布”模式编译时,自动从JavaScript 文件中除去这些文档注释以及空格和其他不需要的内容。这提供了非常有用的功能,它允许在开发时维护调试/描述性的Javascript版本,然后允许做个切换就可生成为运行时高效下载而优化的版本。进入讨论组讨论。
二、 JavaScript调试功能

  面对一大段的JavaScript脚本,以前总是会很头疼,找不到调试这些代码的方法。如果出现什么错误或异常,总是要从头分析,然后插入很多Alert(),调试起来很麻烦。
 
  Visual Studio 2008中JavaScript所具有的另外一个特性,是它提供了更加强大的JavaScript调试功能,这使得JavaScript的使用及构建AJAX应用都变得容易很多。同样,这项功能在免费的Visual Web Developer Express版本中和Visual Studio中都具有。

  (1) 在ASP.NET页面中设置JavaScript断点

  在Visual Studio 2005中调试JavaScript有个很让人头痛的问题,那就是要先运行ASP.NET页面才能在调试器中设置JavaScript断点。而这个问题在Visual Studio 2008有了很好的解决。在服务器的.asp文件和.master文件中就可以直接为客户端的JavaScript设计断点,从而进行调试。

  VS2008中JavaScript编辑调试器的秘密(图四)

  如果开发人员在.aspx文件中设置了如上所示的断点,当在浏览器中运行此页面并运行此页面时,Visual Studio 2008将会自动的将断点位置匹配到所生成的客户端HTML页面中去。

  VS2008中JavaScript编辑调试器的秘密(图五)

  如果开发人员在HTML文档中对断点的位置进行了变化,如增加、删除断点或是移动断点的位置,此时,Visual Studio 2008会很聪明的进行反匹配,即根据客户端HTML文档中断点位置的变化来改变服务器端原始的.aspx文件或.master文件中断点的位置。这就为开发人员提供了一个非常智能的调试器,可以进行一整套的编辑—调试—再编辑—再调试的可叠加的调试工作流程。

  更加让人激动的是,开发人员不仅可以在客户端的JavaScript中设置断点,还可以同时在VB或C#等服务器端文件中设置断点,甚至是在同一页面中。然后使用单一调试模型进行服务器端与客户端代码的调试(当然这必须属于同一个会话)。这样的单一调试模式在AJAX大型应用中非常有用的。

  请注意,开发人员所设置的任何断点,在关闭整个项目或是解决方案后,Visual Studio 2008都会默认的进行保存。当下次再次打开此工程或是项目是,以前设置的断点都将会存在代码中。

  (2) 解决方案管理器(Solution Explorer)中的Script Document导航

  就一般而言,JavaScript在服务器端动态的生成,然后被浏览器进行解释运行(例如,用脚本写成的服务器端控件,如ASP.NET AJAX UpdatePanels)。而在调试时,可以很容易的查看到页面所正在加载的JavaScript的URLs,以及调试器下步所要进入的URL。

  在Visual Studio 2008中,由于将Script Document功能整合到了Visual Studio 2008的解决方案管理器视图中来了(在Visual Studio 2005中是作为一个单独的tool-pane窗口存在的),所以在调试Web应用程序时,这显得非常的有帮助。

  当使用Visual Studio 2008来调试JavaScript时,在Solution explorer pane中可以查看到调试页面所加载的script URLs清单,如下图所示:

  VS2008中JavaScript编辑调试器的秘密(图六)

  开发人员可以双击Script Documents节点下面的任何script URLs来查看此页面所加载的JavaScript内容,从而开发人员可以在此打开的JavaScript文档设置断点进行调试,如下图所示:

  VS2008中JavaScript编辑调试器的秘密(图七)

  (3) 丰富的查看/定位及可视化支持

  当然,JavaScript的易于打开及导航当然是优良调试器的特征之一。而真正使Visual Studio 2008变成独特的JavaScript调试的特点是,它支持对象的执行及监视功能。当开发人员在Visual Studio 2008中对某一变量进行调试监视时,可以查看到此变量对象非常详细有用的信息,如下图所示:

  VS2008中JavaScript编辑调试器的秘密(图八)

  开发人员可以查看运行时状态对象的所在方法、所有事件。可以获得更多的关于此对象的详细属性及属性类型。当然,开发人员可以在此面的网格中查看对象的相关信息,还可以在即时窗口中运行代码来查看相关信息。

  除此之外,Visual Studio 2008还支持可插入可视化调试。它可以提供一般调试器之外的额外信息,从而使调试器对被调试对象提供更加丰富的可视化视图。例如,可以使用Visual Studio 2008内建的”Text”、”XML”或是”HTML”等可视化工具来加载新窗口,从而为被监视的变量提供更加详细的信息。

  三、 小结

  在调试AJAX 和JavaScript时,开发人员可以在服务器端代码中设置客户端JavaScript断点,Visual Studio 2008可以自动地在客户端把它们接连起来(这些断点也可以在关闭项目/解决方案时保存起来)。在调试时,也有完整的监视窗口(watch window),intermediate 窗口和其他更多的支持。Visual Studio 2008中的解决方案管理器现在也自动地列出正在运行的JavaScript文档文件,允许你在任何脚本资源里轻松地设置断点。

  上面比较简单的介绍了一些关于Visual Studio 2008在JavaScript编辑及调试方面的功能特性。这些功能都将包含在Visual Studio 2008及.NET 3.5中。由于Visual Studio 2008支持多定向功能,因此,开发人员不仅可以在基于.NET 3.5的ASP.NET中使用上面的JavaScript编辑调试功能,同样可以在ASP.NET 2.0中应用中调试JavaScript。笔者相关,如此强大的JavaScript编辑调试功能,足够我们开始向Visual Studio 2008迁移了。进入讨论组讨论。
posted @ 2007-09-13 08:46  ejiyuan  阅读(738)  评论(1编辑  收藏  举报