多语言展示
当前在线:894今日阅读:138今日分享:33

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

console在前端开发调试中是个很有用的工具,能够帮助我们更好的进行前端开发和差错,加快开发速度和效率。本经验介绍一些简单的使用console的用法,希望能够帮到大家。
工具/原料
1

浏览器,本经验以火狐浏览器为例

2

调试工具,本经验以火狐的firebug为例

方法/步骤
1

火狐浏览器的调试工具。 火狐浏览器的调试工具是firebug,是一款集成编辑代码、实时显示、调试js等于一体的调试工具。  如图所示是其页面,我们可以在其console栏目下试验console的功能,也可以将console代码加到js代码中进行试验,这两种方法均可以。

2

打印功能。       打印功能使用形式:console.打印方法('需打印的消息');常用的有以下几个:       打印字符串:console.log()       打印提示消息:console.info()       打印警告信息:console.warn()       打印错误消息:  console.error()       打印调试消息: console.debug()       不同的消息前图标不同,用以标示不同的消息类型。

3

查看所有方法。      调用步骤2中的console.log()方法,我们可以实现打印出对象,也可以打印出自己,console.log(console).通过打印自身,可以查看console的方法。     点击更多,可以显示更多的console方法。

4

清理控制台。       太多的命令,如何清理?       console.clear(),或者clear()(大多数浏览器自带的命令行API)一键清理。输入之后,命令行窗口“空空如也”!    下图是清理前后的对比。

5

判断真假。      console.assert(条件语句)。      通过这个方法,可以实现语句真假的判断,经常用于调试if等带有判断的语句中。     当条件错误时,会返回console.error的输出。

6

统计次数。      通过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');   }}

7

查看对象。      console.dir()      通过此方法可以实现显示JavaScript对象的所有属性和属性值,显示成一个可交互的列表。如:console.dir(clear)。

8

其他方法。      当然了,console的方法并不仅仅是这些,还有很多其他的方法,我们在调试中,用到什么就去查什么,孰能生巧,使用多了,自然就会熟练很多,也会对console的强大调试能力有了自己的深刻理解。

推荐信息