如何在ie里面调试js

 今天，我想向大家介绍一下 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 的程序员，不会再抱怨没有好的调试工具了，因为利器就在你手中。