浏览器,本经验以火狐浏览器为例
调试工具,本经验以火狐的firebug为例
火狐浏览器的调试工具。 火狐浏览器的调试工具是firebug,是一款集成编辑代码、实时显示、调试js等于一体的调试工具。 如图所示是其页面,我们可以在其console栏目下试验console的功能,也可以将console代码加到js代码中进行试验,这两种方法均可以。
打印功能。 打印功能使用形式:console.打印方法('需打印的消息');常用的有以下几个: 打印字符串:console.log() 打印提示消息:console.info() 打印警告信息:console.warn() 打印错误消息: console.error() 打印调试消息: console.debug() 不同的消息前图标不同,用以标示不同的消息类型。
查看所有方法。 调用步骤2中的console.log()方法,我们可以实现打印出对象,也可以打印出自己,console.log(console).通过打印自身,可以查看console的方法。 点击更多,可以显示更多的console方法。
清理控制台。 太多的命令,如何清理? console.clear(),或者clear()(大多数浏览器自带的命令行API)一键清理。输入之后,命令行窗口“空空如也”! 下图是清理前后的对比。
判断真假。 console.assert(条件语句)。 通过这个方法,可以实现语句真假的判断,经常用于调试if等带有判断的语句中。 当条件错误时,会返回console.error的输出。
统计次数。 通过console.count(需计数变量)方法,可以轻松实现计数,无需增加变量进行计数。如输入以下代码,可以统计在不同的循环中,变量使用次数分别为多少。function hi(name) { console.count(name); return 'hi ' + name;} for(var i = 0; i < 10; i++) { if(i < 4) { hi('person'); } else { hi('god'); }}
查看对象。 console.dir() 通过此方法可以实现显示JavaScript对象的所有属性和属性值,显示成一个可交互的列表。如:console.dir(clear)。
其他方法。 当然了,console的方法并不仅仅是这些,还有很多其他的方法,我们在调试中,用到什么就去查什么,孰能生巧,使用多了,自然就会熟练很多,也会对console的强大调试能力有了自己的深刻理解。