今天,我想向大家介绍一下 IE 的调试工具,因为经常听到一些刚入门的 JavaScript 开发人员抱怨说,没有好的 JavaScript 开发环境,没有好用的调试器,没有集成的 IDE 工具。2005 年,一个被称做
Aptana<wbr> 的免费开源项目启动了,但是直到 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”来引导安装的。下面,通过安装过程的截图,你可以了解到如何安装这个工具。
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
完成上面那个的“Internet 选项”设置之后,关闭所有已经打开的 IE 窗口,然后再运行 IE。你会发现在 IE 的“查看”菜单下,多了一个“脚本调试程序”项,如下图所示
</wbr><wbr>
</wbr><wbr>
至此,“Microsoft 脚本编辑器”便安装完毕了。当你浏览的网页出现脚本语法错误或实时运行错误时,浏览器将自动弹出如下的窗口,提示你是否调试此错误。
</wbr><wbr>
</wbr><wbr>
而当你没有安装此工具前,所有的脚本错误只能通过点击浏览器状态栏的左下角,弹出错误提示窗口来查看,而这显然是“幼稚”的方法,起到的作用也如“盲人摸象”一般。
虽然这个工具可以用来解决脚本运行时的错误,但有时我们只想跟踪程序的逻辑,或者熟悉 DOM 对象的 API。也许被跟踪的代码任何错误也没有,或者我们只想看看在某一时刻,某个 DOM 对象的某个属性是否能被访问。在所有的语言调试环境中,通用的方法就是设置“断点”,而这个工具对于“断点”的支持不像 Firebug</wbr><wbr> 或 [url=https://addons.mozilla.org/firefox/216/]JavaScrip Debugger[/url] 那样好,可以调出已经装载在当前网页中的任何脚本,以便随时的添加断点。所以,利用“Microsoft 脚本编辑器”动态地设置脚本断点,来进行跟踪调试是非常不方便的。对于这种情况,我们需要在代码中人为地制造一些断点,达到方便调试的目的。比如,有如下的代码片段
<script> var person = {name: "Lewis", gender: "male", blogURL: "http://www.lewislv.org"}; var years = [2000, 2001, 2002, 2004, 2005, 2006]; person.employmentYears = years;</script>
以上是一段语法正确的 JavaScript 代码。然而,初学者可能只是想了解对象是如何被实例化,代码是如何被运行的。IE 的 JavaScript 解释器提供了一个保留的 <wbr>debugger</wbr></wbr><wbr> 语句(VBScript 调试的等价关键字是 stop),它可以告诉浏览器调出调试程序,以此达到设置断点的目的。对于上面的代码,假设我想了解一下 person 对象和 years 数组的存储结构,那么我可以在代码的入口处添加一条 debugger 语句,更改后的代码片段如下
<script> <wbr>debugger</wbr></wbr><wbr> var person = {name: "Lewis", gender: "male", blogURL: "http://www.lewislv.org"}; var years = [2000, 2001, 2002, 2004, 2005, 2006]; person.employmentYears = years;</script>
当代码在浏览器中被装载并运行时,它会解释 debugger 语句,弹出是否调试的窗口。同样,我做了一些截图,用来演示如何达到查看变量存储结构的目的。
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
此时,断点停留在 alert(a) 那一行,其实这一行是故意添加的错误代码,只是为了产生一个断点。因此,可以像下图那样,跳过此行代码的执行,直接转到给 person 对象赋值那一行。
</wbr><wbr>
</wbr><wbr>
之后,我们可以像下图那样,对 person 对象和 years 数组添加监视,以便观察它们的存储结构。
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
现在,我们可以“逐语句”的单步执行了,这样被监视变量的每一次细微变化,都可以被监视得一清二楚。
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
</wbr><wbr>
“工欲善其事,必先利其器”,“君子性非异也,善假于物也”,说得都是这个道理。好了,希望那些在 IE 下开发 JavaScript 的程序员,不会再抱怨没有好的调试工具了,因为利器就在你手中。
本篇不想介绍这个新生儿,我只是想介绍一个被微软藏着掖着,总也不放到明面儿上,让大家都知道的工具—“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”来引导安装的。下面,通过安装过程的截图,你可以了解到如何安装这个工具。
</wbr><wbr>
![01.jpg](http://www.lewislv.org/images/ie-javascript-debugger/01.jpg)
</wbr><wbr>
![02.jpg](http://www.lewislv.org/images/ie-javascript-debugger/02.jpg)
</wbr><wbr>
![03.jpg](http://www.lewislv.org/images/ie-javascript-debugger/03.jpg)
</wbr><wbr>
![04.jpg](http://www.lewislv.org/images/ie-javascript-debugger/04.jpg)
</wbr><wbr>
![05.jpg](http://www.lewislv.org/images/ie-javascript-debugger/05.jpg)
</wbr><wbr>
![06.jpg](http://www.lewislv.org/images/ie-javascript-debugger/06.jpg)
</wbr><wbr>
![07.jpg](http://www.lewislv.org/images/ie-javascript-debugger/07.jpg)
</wbr><wbr>
![08.jpg](http://www.lewislv.org/images/ie-javascript-debugger/08.jpg)
完成上面那个的“Internet 选项”设置之后,关闭所有已经打开的 IE 窗口,然后再运行 IE。你会发现在 IE 的“查看”菜单下,多了一个“脚本调试程序”项,如下图所示
</wbr><wbr>
![09.jpg](http://www.lewislv.org/images/ie-javascript-debugger/09.jpg)
至此,“Microsoft 脚本编辑器”便安装完毕了。当你浏览的网页出现脚本语法错误或实时运行错误时,浏览器将自动弹出如下的窗口,提示你是否调试此错误。
</wbr><wbr>
![10.jpg](http://www.lewislv.org/images/ie-javascript-debugger/10.jpg)
而当你没有安装此工具前,所有的脚本错误只能通过点击浏览器状态栏的左下角,弹出错误提示窗口来查看,而这显然是“幼稚”的方法,起到的作用也如“盲人摸象”一般。
虽然这个工具可以用来解决脚本运行时的错误,但有时我们只想跟踪程序的逻辑,或者熟悉 DOM 对象的 API。也许被跟踪的代码任何错误也没有,或者我们只想看看在某一时刻,某个 DOM 对象的某个属性是否能被访问。在所有的语言调试环境中,通用的方法就是设置“断点”,而这个工具对于“断点”的支持不像 Firebug</wbr><wbr> 或 [url=https://addons.mozilla.org/firefox/216/]JavaScrip Debugger[/url] 那样好,可以调出已经装载在当前网页中的任何脚本,以便随时的添加断点。所以,利用“Microsoft 脚本编辑器”动态地设置脚本断点,来进行跟踪调试是非常不方便的。对于这种情况,我们需要在代码中人为地制造一些断点,达到方便调试的目的。比如,有如下的代码片段
<script> var person = {name: "Lewis", gender: "male", blogURL: "http://www.lewislv.org"}; var years = [2000, 2001, 2002, 2004, 2005, 2006]; person.employmentYears = years;</script>
以上是一段语法正确的 JavaScript 代码。然而,初学者可能只是想了解对象是如何被实例化,代码是如何被运行的。IE 的 JavaScript 解释器提供了一个保留的 <wbr>debugger</wbr></wbr><wbr> 语句(VBScript 调试的等价关键字是 stop),它可以告诉浏览器调出调试程序,以此达到设置断点的目的。对于上面的代码,假设我想了解一下 person 对象和 years 数组的存储结构,那么我可以在代码的入口处添加一条 debugger 语句,更改后的代码片段如下
<script> <wbr>debugger</wbr></wbr><wbr> var person = {name: "Lewis", gender: "male", blogURL: "http://www.lewislv.org"}; var years = [2000, 2001, 2002, 2004, 2005, 2006]; person.employmentYears = years;</script>
当代码在浏览器中被装载并运行时,它会解释 debugger 语句,弹出是否调试的窗口。同样,我做了一些截图,用来演示如何达到查看变量存储结构的目的。
</wbr><wbr>
![11.jpg](http://www.lewislv.org/images/ie-javascript-debugger/11.jpg)
</wbr><wbr>
![12.jpg](http://www.lewislv.org/images/ie-javascript-debugger/12.jpg)
</wbr><wbr>
![13.jpg](http://www.lewislv.org/images/ie-javascript-debugger/13.jpg)
</wbr><wbr>
![14.jpg](http://www.lewislv.org/images/ie-javascript-debugger/14.jpg)
此时,断点停留在 alert(a) 那一行,其实这一行是故意添加的错误代码,只是为了产生一个断点。因此,可以像下图那样,跳过此行代码的执行,直接转到给 person 对象赋值那一行。
</wbr><wbr>
![15.jpg](http://www.lewislv.org/images/ie-javascript-debugger/15.jpg)
之后,我们可以像下图那样,对 person 对象和 years 数组添加监视,以便观察它们的存储结构。
</wbr><wbr>
![16.jpg](http://www.lewislv.org/images/ie-javascript-debugger/16.jpg)
</wbr><wbr>
![17.jpg](http://www.lewislv.org/images/ie-javascript-debugger/17.jpg)
现在,我们可以“逐语句”的单步执行了,这样被监视变量的每一次细微变化,都可以被监视得一清二楚。
</wbr><wbr>
![18.jpg](http://www.lewislv.org/images/ie-javascript-debugger/18.jpg)
</wbr><wbr>
![19.jpg](http://www.lewislv.org/images/ie-javascript-debugger/19.jpg)
</wbr><wbr>
![20.jpg](http://www.lewislv.org/images/ie-javascript-debugger/20.jpg)
“工欲善其事,必先利其器”,“君子性非异也,善假于物也”,说得都是这个道理。好了,希望那些在 IE 下开发 JavaScript 的程序员,不会再抱怨没有好的调试工具了,因为利器就在你手中。
![b.gif](https://i-blog.csdnimg.cn/blog_migrate/2f60c0bc47d4178ac5e2b807936153ff.gif)