Javascipt脚本调试(Javascript debugging)

简介

根据 CNZZ数据中心对国内主流浏览器的统计分析，2012年3月国产浏览器中360安全浏览器、搜狗高速浏览器和傲游浏览器的使用率分别为24.39%、7.37%、1.75%；国外浏览器中微软IE浏览器、谷歌Chrome浏览器及苹果Safari浏览器的使用率分别为53.40%、3.21%、2.22%。随着微软IE6 Countdown站点的发布、HTML5及CSS3技术的推出，谷歌等非IE内核浏览器也开始主导国外市场的前沿。在网页设计方面我们不得不考虑在主流浏览器上获得不错的展现效果。Javascript是动态网页不可或缺的关键技术，为了适应各种浏览器我们需要了解各浏览器中的脚本调试方法，总结切实可行的跨浏览器脚本开发及测试方法。

什么是好的调试方法？

好的调试方法就是让调试方法告别document.write；就是告别alert；告别window.title；告别window.status，是在不同的浏览器上无论是测试周期中或者发布后调式方法都对最终用户不可见，也不会影响用户感受。

各浏览器的调试输出工具

既然告别硬编码的调试方式我们就需要为各个浏览器找到合适的调试输出工具：

IE系浏览器（IE6/IE7/IE8）：IE Developer Tools，此功能内嵌在IE9当中。

FireFox浏览器：Firebug

谷歌Chrome/苹果Safari/Opera：都可以在错误控制台中查看到错误信息。

用Console.log统一调试输出

在代码中使用console.log，也就是类似于alert，只不过把想要的信息输出到console里。console对象在Firefox、Chrome、Safari里都可以使用。除了console.log，还有console.error，console.info等等。

Firebug API - Console API： http://getfirebug.com/wiki/index.php/Console_API

IE Developer Tools & IE9： http://blogs.msdn.com/b/cdndevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

但IE9之前的版本都需要安装IE Developer Tools且在打开的情况下，网页中的console对象才可用，否则浏览器会弹出console对象不可用的脚本错误信息。如上为问题一，各浏览器中console API接口不一致为问题二，如何解决这两个问题？答案是使用统一的类库，如下：

fauxconsole： http://icant.co.uk/sandbox/fauxconsole/

console.blog()： http://icant.co.uk/sandbox/fauxconsole/

其中console.blog()博客上更为详细的讲述了如何用javascript代码解决各种浏览器中的console对象处理，大家也可以根据开发的实际情况自由组合使用。

IE脚本调试的注意事项

对于初学Javascript的同志，建议使用Firefox浏览器，如果你就是愿意捧着微软的东西那么别忘了将IE进行如下设置才能顺利进行调试：

关于如何使用微软的脚本编辑器MSE、IE开发者工具等请参考《 在 IE 中调试 JavaScript》，其实Visual Studio中内嵌的脚本编辑器就是MSE演化而来的，所以没必要重复安装。

对于微软在脚本中增加的debugger关键字，不建议使用，如果使用请在使用后尽快删除。因为如果客户端安装了MSE及Visual Studio产品，即使是在发布的网页中debugger也会导致弹出微软的调试器选择窗口。具体已有博友文《 使用debugger语句调试JScript的郁闷》中进行了说明。

其它工具

《 IE下的优秀JavaScript调试工具Companion.JS》这是在偶然当中发现的，还未试用如有使用者可以发表一下评论。

总结

当然对于Javascript开发还有许多优秀的工具和开源类库，学习和了解开发环境就是掌握工具，工欲善其事，必先利其器。

本文链接