我所使用的JavaScript调试环境(1)

这段时间写脚本的机会比较多，也就对这些工具有个比较。我们都知道，工欲善其事，必先利其器嘛。有的人觉得脚本嘛有什么好调试的，一眼就看过来了，当然过于依赖于调试器很多时候也会让我们变得懒惰和不仔细，不过大多数的时候好的开发环境还是让我们事半功倍的。

    其实回想起接触脚本的时间算起来还真的是有些念头了，从第一次做个人网页算起，00年吧，都要来5个年头了。那个时候学C语言也没多久，对TC2和TC++1.0那两个IDE喜欢的不得了，结果在遇到了没有集成开发环境的JavaScript后，真是郁闷的要命，当然也就没有好好学习了。直到一年前我对JS的认识都是以拿来主义为主，一般不会自己从头写个什么功能的。

    计划不如变化，今年下半年的工作却主要集中在了JS的开发上，于是开始恶补JavaScript知识，同时自己也搜寻好的IDE。不过以JavaScript作为一个解释性语言的原理来看，其实因该可以有好的调试环境的，因为想当初学习机上的BASIC都可以单步执行也。可是为什么JavaScript确实又没有一个象样的调试环境呢？这个和JavaScript这个语言的使用环境有关，你看Visual JScript .NET不一样是可编译可调试的吗？

    我们这里说这个JavaScript都是指在网页中使用的，如果我们抛开了DHTML和DOM模型，JS存在还真是想不出有什么大的意义了。正是DHTML需要Browser这个支持环境，一下就让 JavaScript的调试变得郁闷起来了。

    在我记忆里微软那个脚本调试器，是和Visual Studio一起的一个东东，而且是挺早以前就有了的，可是只是偶尔网页出错会跑出来，但也不知道它到底什么时候出来，也没有深究(后面会就究的:)。其它的一些JavaScript IDE大多都是用IE作为运行环境，当然可以也可以使用IE的COM组件接口来执行一些JS语句和函数，但都不是真正意义上的IDE，因为我们需要的是Step Into & Step Over! 前者的代表是一个叫做Antechinus JavaScript Editor的东东，看看图片，还不错吧:)
    
    (本文第11个回复里有下载地址)

    这个程序看着挺专业自己还是只叫做Editor，还比较的谦虚。它的代码着色和IntelliSence都做得都还可以了，不过它还有一个不错的地方是提供了一个系列的示例代码库，就是上图右下window里的Solutions，用TreeView组织起来的。这类工具还有Developer's JavaScript Editor、jsEditor、MyEclipse JavaScript Editor，而且他们无疑例外都叫做Editor了。

    当然除了一穷二白的Notepad可以写脚本，还有DreamWeaver、FontPage什么的，都可以写，而且后者也有highlighting和有限的IntelliSence。我们就不去多说这些了，接下来给大家推荐的真正的JavaScirpt开发的IDE就是... VS.NET 2003 + VS.NET 2005，是不是觉得既然都提到2005了，还要2003干什么啊?! 后面会说到为什么会这么郁闷。

    居然杀鸡用牛刀，可是这个牛刀就是有很好的杀鸡能力哦。为什么不直接使用VS.NET 2005而还要使用2003，由于2005我手里在用的只是个beta1，有一个功能不知道是没有improve好，还是什么别的原因，完全赶不上2003，而且还没法完全替代:( 到底是什么功能呢？下面再具体的说，去吃个猕猴桃先。 

   不管我们是怎么调试JavaScript，他总是在browser里运行，下面我都说在IE里的情况。目前我使用IE6.0 sp1，要启动脚本调试，需要在IE的Tools->Internet Options的Advanced里uncheck 'Disabled Script Debugging.'，否则脚本出错时我只能在browser的status bar上看到一个错误提示图标。这样一来，当browser里出现脚本错误的时候，就会弹出一个这样的warning dialog：
   
    点击Yes后，将出现如下窗口： 
   
    这个debugger dialog里列出的‘Possible Debuggers’就是我机器里已安装的Script调试器。其中"Microsoft Script Editor"就是上次说的Visual Studio里带的调试器了，... 2003、... 2005就不用说了，就是VS.NET了。这种情况的调试是最普通的调试，可以直接把断点定位到脚本错误的行上，然后通过watch窗口看local变量的值来确定错误的所在。

    那么脚本要是不明显的出语法错误怎么设断点呢？这里有两个办法，一个是使用IE View菜单里的Script Debugger子菜单(这个菜单是在IE的Tools->Internet Options->Advanced里设置过才会出来的)： 
   
    "Open"就和上面说到到的点"Yes"后出来的窗口一样，点"Break at Next Statement"比较的有意思，它将会在你的Browser执行下一条脚本的时候让你选择调试器来调试，这一点十分便于我们分析别人的拥有复杂JavaScript的页面。比如gmail里面的管理页面，如果我想看看点了star之后它是怎么处理的，就可以使用这个"Break at Next Statement"，让它break在next statement上。不过使用这个feature有个技巧：有的页面由于捕获了onmousemove事件，如果你通过鼠标去点击菜单里的"Break at Next Statement"条目，你的next statement总是被onmousemove给捕获了，而得不到你想要的onclick的语句的中断，怎么办呢?! 那就是使用快捷键啦，比如你希望激活调试gmail里的mail list上的star(如下图)被点击时执行的脚本，你就把鼠标放在star上面，先按快捷键"Alt+V"、"u"、"b"，再点击就行了。
    

    到这里就可以说一下为什么现在还要用VS.NET 2003，而不只用VS.NET 2005来调试脚本了。比如上面的case，如果我在"Possible Debuggers"里选"New Instance of Visual Studio Whidbey"，我们将会得到一个Msg Box：
   
    用我test team一个哥们的话来说：真是伤感哦！

    这时我们使用VS.NET 2003就可以顺利的跟踪了。
   
    确实郁闷吧？不过，我相信whidbey正式release的时候，这个问题因该是能解决的了，那时2003就可以完全下岗了。 
  
    当然让调试器whidbey跟踪<script src="..."></script>这种情况不是完全没有可能，这里有个小hack可以使用的。就是在调试前把会被引用到的script文件预先就打开在whidbey里，然后就能trace到该文件中去，这个办法显然只能解决本地调试，对于服务器端引用的意义不大，因为我们没法预先把服务器上的脚本文件打开:(。  _fcksavedurl=""..."></script>这种情况不是完全没有可能，这里有个小hack可以使用的。就是在调试前把会被引用到的script文件预先就打开在whidbey里，然后就能trace到该文件中去，这个办法显然只能解决本地调试，对于服务器端引用的意义不大，因为我们没法预先把服务器上的脚本文件打开:(。 " 


我们简单的使用VS.NET打开一个包含脚本的html文件，我们发现我们是不能调试它的，虽然我们可以按F9来设置一个端点，但是这个断点却是形同虚设:(。这是因为我们的browser还没有进入可调试状态，使用上一篇文章中的在代码出错时选择Debugger的方法可以让browser进入调试状态，更普通的办法是把Browser的线程附加到调试器上去。下图就是调试Test.html的示例：
    
    附加线程到运行Test.html的Browser进程上，就是Processes List里的"IEXPLORE.EXE"。 

    这样一来再在脚本代码上按F9设置断点，断点的状态就会从下图的第一个unavailable状态变为下图的第二个available状态。
   

    这样一来我们的代码执行到断点处就会停止下来，这个好像废话哈。下面就是VS.NET 2005比VS.NET 2003强的地方登场了。我们如果用过VS.NET编译型程序的调试，都知道把鼠标放在变量名上，会很快有个Tooltip显示变量的值，或对象的类型和默认ToString()的值。这个功能在2003和2005里同样拥有，只是对于对象Object，在2003里就显示一个{...}，如果要看{...}是啥？需要使用Add Watch或QuickWatch来看；在whidbey里面，这个察看功能有了很大的提升，我们将会看到一个可展开的节点来显示对象的值，我们可以在弹出窗口里浏览整个对象树，如下图：
   

    这个东西看起来是不是对调试非常方便呢？当然要是我们觉得弹出窗口太大遮挡了代码，而且这时我们又浏览了很多几级对象树了，屏幕上有一大堆展开的弹出窗口，我们不希望它们消失后，看清了代码又再把它们重新弄出来，怎么办呢？我们这时可以按Ctrl键或者鼠标中键(就是滚轮)让这些弹出窗口透明化~~~
   
    很酷很贴心的功能吧？ 

    调试脚本中可能遇到的问题和对策(我们都默认IE的允许脚本调试的选项是开启的)：

    1、本来我们打开IE的脚本调试后，程序出现脚本错误时就会弹出一个MsgBox来提示是否调试，而不只是在IE左下角显示一个warning icon。但是有的时候经过长时间的调试，IE在脚本错误的时候，会不再弹出那个调试提示框，而是又变为在左下角显示错误图标。解决这个问题很简单，关掉browser重新打开来调试就好了。

    2、在脚本正常运行时，我们使用IE的View->Script Debugger的Open和Break at Next Statement选项会强行调出脚本调试器选择窗口。但是如果我们在脚本中开启过popup窗口，这两个调试选项会失效，就是点选后没有任何反应，这个可能是IE的bug，解决办法一：重新起动IE来调试；解决办法二：在希望调试的脚本语句前写一个错误的脚本调用，比如a.a;，这样程序运行在a.a语句时就会被break并弹出错误调试提示MsgBox，我们可以在这时选择调试器，进入调试状态后使用鼠标改变脚本执行顺序，跳过错误的语句就行了。

    关于脚本调试环境先写到这里，以后有更好的调试方法我会更新进来，欢迎大家提出更好的脚本调试意见和建议。