本文摘自PHP中文网,作者藏色散人,侵删。
javascript的console用法是:1、“console.assert(expression, object[, object...])”语法;2、“console.count([label])”语法等等。
本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重,取而代之则是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)
了。
然而对于作为一个全局对象的console
对象来说,大多数人了解得还并不全面,当然我也是,经过我的一番学习,现在对于这个能玩转控制台的 JS 对象有了一定的认识,想与大家分享一下。
console 对象除了console.log()
这一最常被开发者使用的方法之外,还有很多其他的方法。灵活运用这些方法,可以给开发过程增添许多便利。
console 的方法
console.assert(expression, object[, object...])
接收至少两个参数,第一个参数的值或返回值为false
的时候,将会在控制台上输出后续参数的值。例如:
1 2 |
|
console.count([label])
输出执行到该行的次数,可选参数 label 可以输出在次数之前,例如:
1 2 3 4 |
|
console.dir(object)
将传入对象的属性,包括子对象的属性以列表形式输出,例如:
1 2 3 4 5 |
|
输出:
console.error(object[, object...])
用于输出错误信息,用法和常见的console.log
一样,不同点在于输出内容会标记为错误的样式,便于分辨。输出结果:
console.group
这是个有趣的方法,它能够让控制台输出的语句产生不同的层级嵌套关系,每一个console.group()
会增加一层嵌套,相反要减少一层嵌套可以使用console.groupEnd()
方法。语言表述比较无力,看代码:
1 2 3 4 5 6 7 8 9 10 |
|
输出结果:
和console.group()
相似的方法是console.groupCollapsed()
作用相同,不同点是嵌套的输出内容是折叠状态,在有大段内容输出的时候使用这个方法可以使输出版面不至于太长。。。吧
console.info(object[, object...])
此方法与之前说到的console.error
一样,用于输出信息,没有什么特别之处。
1 |
|
console.table()
可将传入的对象,或数组以表格形式输出,相比传统树形输出,这种输出方案更适合内部元素排列整齐的对象或数组,不然可能会出现很多的 undefined。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
也可以
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者