重复容易,改变很难
java,,,不错的玩具
posts - 21,  comments - 42,  trackbacks - 0

         今天,我想向大家介绍一下 IE 的调试工具,因为经常听到一些刚入门的 JavaScript 开发人员抱怨说,没有好的 JavaScript 开发环境,没有好用的调试器,没有集成的 IDE 工具。2005 年,一个被称做 Aptana 的免费开源项目启动了,但是直到 2006 年底,才为人们所知。新年伊始,对于开发人员来说,这个 Ajax 开发环境无疑是个好消息。

本篇不想介绍这个新生儿,我只是想介绍一个被微软藏着掖着,总也不放到明面儿上,让大家都知道的工具—“Microsoft 脚本编辑器”。当 IE 被升级到 5.5 以上之后,那个所谓的“Windows Script Debugger”其实已经与 IE 的 JavaScript 开发不兼容了,许多对象的属性值根本无法被正确的监视。但是做为替代品,“Microsoft 脚本编辑器”恰恰可以弥补这个不足,它的强大,足以应付 IE 下网页脚本的开发。这个工具被捆绑在“Microsoft Development Environment”环境中,如果你安装有“Microsoft Visual Studio .NET”,或者“Microsoft Office XP(10.0)”以上的版本,你都可以使用这个脚本调试工具。由于这个工具是微软自己开发的,所以运行效率很高,并且与 IE 的兼容性也是最好的。

因为“Microsoft Visual Studio .NET”太大了,所以通过 Office 来安装这个工具,就显得特别有意义。安装此工具的方法比较特殊,因为它是通过“Office Word”来引导安装的。下面,通过安装过程的截图,你可以了解到如何安装这个工具。
















完成上面那个的“Internet 选项”设置之后,关闭所有已经打开的 IE 窗口,然后再运行 IE。你会发现在 IE 的“查看”菜单下,多了一个“脚本调试程序”项,如下图所示


至此,“Microsoft 脚本编辑器”便安装完毕了。当你浏览的网页出现脚本语法错误或实时运行错误时,浏览器将自动弹出如下的窗口,提示你是否调试此错误。



而当你没有安装此工具前,所有的脚本错误只能通过点击浏览器状态栏的左下角,弹出错误提示窗口来查看,而这显然是“幼稚”的方法,起到的作用也如“盲人摸象”一般。

虽然这个工具可以用来解决脚本运行时的错误,但有时我们只想跟踪程序的逻辑,或者熟悉 DOM 对象的 API。也许被跟踪的代码任何错误也没有,或者我们只想看看在某一时刻,某个 DOM 对象的某个属性是否能被访问。在所有的语言调试环境中,通用的方法就是设置“断点”,而这个工具对于“断点”的支持不像 FirebugJavaScrip Debugger 那样好,可以调出已经装载在当前网页中的任何脚本,以便随时的添加断点。所以,利用“Microsoft 脚本编辑器”动态地设置脚本断点,来进行跟踪调试是非常不方便的。对于这种情况,我们需要在代码中人为地制造一些断点,达到方便调试的目的。比如,有如下的代码片段

     var person = {name: "Lewis", gender: "male", blogURL: "http://www.lewislv.org"};     var years = [2000, 2001, 2002, 2004, 2005, 2006];     person.employmentYears = years; 

以上是一段语法正确的 JavaScript 代码。然而,初学者可能只是想了解对象是如何被实例化,代码是如何被运行的。IE 的 JavaScript 解释器提供了一个保留的 debugger 语句(VBScript 调试的等价关键字是 stop),它可以告诉浏览器调出调试程序,以此达到设置断点的目的。对于上面的代码,假设我想了解一下 person 对象和 years 数组的存储结构,那么我可以在代码的入口处添加一条 debugger 语句,更改后的代码片段如下

     debugger     var person = {name: “Lewis”, gender: “male”, blogURL: “http://www.lewislv.org”};     var years = [2000, 2001, 2002, 2004, 2005, 2006];     person.employmentYears = years; 

当代码在浏览器中被装载并运行时,它会解释 debugger 语句,弹出是否调试的窗口。同样,我做了一些截图,用来演示如何达到查看变量存储结构的目的











此时,断点停留在 alert(a) 那一行,其实这一行是故意添加的错误代码,只是为了产生一个断点。因此,可以像下图那样,跳过此行代码的执行,直接转到给 person 对象赋值那一行。







现在,我们可以“逐语句”的单步执行了,这样被监视变量的每一次细微变化,都可以被监视得一清二楚。












“工欲善其事,必先利其器”,“君子性非异也,善假于物也”,说得都是这个道理。好了,希望那些在 IE 下开发 JavaScript 的程序员,不会再抱怨没有好的调试工具了,因为利器就在你手中。
posted on 2007-07-20 13:46 分享爱的空间 阅读(1899) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航:
 

<2024年12月>
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

常用链接

留言簿(5)

随笔档案

文章档案

相册

搜索

  •  

最新评论

阅读排行榜

评论排行榜