前端学习中的console的简单用法

前端学习中的console的简单用法

console在前端开发调试中是个很有用的工具，能够帮助我们更好的进行前端开发和差错，加快开发速度和效率。

本经验介绍一些简单的使用console的用法，希望能够帮到大家。

火狐浏览器的调试工具。

火狐浏览器的调试工具是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的强大调试能力有了自己的深刻理解。