你有没有写过js?有没有经历过js出错时痛苦的调试过程?有没有写了一堆的alert()来打印变量的值,导致弹出框弹出的声音差点让你崩溃?你是否在寻找一种方式,让你能像调试java一样调试js?


 如果你的回答都是“是”,那么请看本文,肯定收益不少。


(好像上传图片比较麻烦,要看带图片版的请下载附件)


  


 


Microsoft Script Editor有没有安装好:


其中一种方法


        打开Microsoft word右击工具条,选择 “web tools” 或者点View >Toolbar->Web Tools


 


        点击 Microsoft Script Editor 图表 (见下图 – 红色框框内的图标)


 


 


点击了以后,如果已经安装好,就会打开Microsoft Script Editor,如下图:


如果没有安装好,它会提示你要安装,点击确定安装好了。


 


一般情况下,经过安装以后Microsoft Script Editor就处在可用状态了,但是在比较特殊的情况下,还会有一些问题。比如你不是管理员,那么有时候在点击debug/processes菜单的时候会出现如下的错误:


这种错误表示你的windows用户没有debug的权限,需要到控制面板里面将你的用户加入到debug组里面。


 


完成这些步骤以后,你的debugger已经处于可用状态了,但是离debug js还有一点点距离。因为ie还需要做一些设定。打开ie,到advanced里面把画红圈的两项内容去掉。


这样可以让脚本在有错误的情况下弹出debug入口:


 


自己找一个有脚本错误的文件,在弹出上面警告框的时候点确定,就可以进入debug界面了。


debug,如果操作系统是win2k这种情况很可能出现,什么原因不清楚,解决的办法是事先把Microsoft Script Editor打开,然后再弹出那个警告框的时候就可以调试了。前面说到这个Microsoft Script Editor是藏在word里面的,如果每次都要打开word去吧它打开也太麻烦了,所以找到他的实际路径,做个快捷方式。它一般藏身与Microsoft Office安装路径\OFFICE11\下面,名称为MSE7.EXE。


打开debugger前还会有一个对话框,如下图所示:


possible debugger,这是因为我的系统是win2k,我事先已经打开了一个,如果我事先不打开一个,那么possible debugger就只有一个,但是却不能工作:(


所以,在这种情况下,不能选new instance,可能在别的操作系统环境下,情况不同,这要靠自己试验了。点确定以后,还会出现一个对话框,直接点确定就是。这个时候他一般就会比较准确地定位到你出错的那一行代码上了。如下图所示,


有时候,他会打开多个两个文档,一个是js定义的,另一个是调用这个js的,如上图右边所示,你可以在两个文档之间切换一下,看看哪里是真正的根源。


出错以后的调试能做的事情好像不多,因为如果不停止debug,他一直会纠缠于出错的代码,导致没法往下执行。只能看看一些变量的值。选中一个变量,按shift+f9可以quick watch。当然也可以点右键加入watch。这样变量的值就显示出来了,这一招在调试的时候非常有用。再也不用写烦人的alert(xx)来显示一个变量的值了,尤其是你alert(xx),这个xx不幸是个object的时候,你就会看到令你吐血的结果。


出错后调试可能很多人用得比较多,但是在代码出现一些逻辑错误的时候,我想象java或者别的代码一样跟踪js的执行过程可不可以呢?答案是肯定的,你是不是觉得生活突然美好了许多?


OK,让我们来看看怎么做到。


首先确保你在出错的情况下已经可以顺利地调试了,不然先对照文档,把该设置的设置好。


打开一个页面,点view菜单,可以看到多了一项:script debugger,如下所示:


点open就可以进入调试器了。


不过有时候(经常地)你看到的是这样的场景:


哪里有script debugger?我不知道为什么会这样,也许微软的人知道。不过幸亏解决这个问题并不难,只要在这个窗口下安ctrl+N,打开一个新窗口就行了。这个新窗口会复制原来的窗口所有的内容,包括session,所以跟原来的窗口基本上是一模一样的。经过这样操作以后,这个script debugger 99%就出来了。如果还不出来,多试几次。


这的确比较令人抓狂,不过我想,是不是由于这些原因,所以一直没有详细的官方操作手册之类的东西呢?这个东西莫名其妙的地方太多,大家要结合自己的“机情”,反复揣摩其心思,建设一个XX特色的调试环境。


言归正传,现在进入了调试界面,点左边灰色的条就可以增加一个断点,再点一下就可以,去处,也有快捷键,一般是ctrl+alt+b。


接下来就是最激动人心的地方了,按f10可以让js代码单步执行,爽吧?不过有的人的机子上是f11。自己找找,反正是这几个键。同时你可以将变量加入watch观察其值。爽啊,反正我第一次发现这个功能的时候激动了好久,一直激动到手指头有点酸了:代码太长,这么一步步的何时是尽头啊。幸亏还有一个键,f5,可以让你直接执行到下一个断点。如果下一个没断点了就执行完以后返回到你的IE,这个功能非常有用哦。你可以在ie的页面上填好东西,然后按按钮之前跑到debugger里设个断点,然后按下按钮,这时debugger就会停在你的断点上。


从现在开始,享受js代码的开发吧!