作者:饿狼传说少校_584_869_541 | 来源:互联网 | 2023-01-28 17:50
你真的会使用console吗
1. console.table
表格形式打印
console.log
是我们最常用的打印方法,但是在打印一些比较复杂的数据时候,我们浏览起来就会显得很费力。比如:
而使用console.table打印就会自动生成表格,使打印结果看起来更加清晰易懂:
2. console.dir
打印对象
console.dir
与console.log
不同之处在于,前者可以递归打印对象的所有属性,而后者侧重于字符串化的打印。比如要打印一个DOM节点。
console.log
只是把html节点打印出来,而console.table
把DOM对象的所有属性打印出来。
console.log
附带样式打印
细心的朋友可能会发现许多网站会在Chrome控制台打印许多提示信息,而且还附带样式,看起来非常的惊艳。比如天猫:
但是样式具体要怎么打印呢。
其实很简单,只需要在打印的字符串前加上%c就可以添加样式了。
还可以通过%s,%d等插入数据,和C语言printf相似。
console.trace
追踪函数调用
console.trace()
方法用于显示当前执行的代码在堆栈中的调用路径。通过在某个方法中打印一些信息,可以快速定位到该方法所在的文件和文件内具体位置,以及查看函数的调用栈。
console.assert
条件打印
assert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。比如:
例子中就只输出了条件不成立,而且用红色警示展示。
console.count
技术打印
相信在平时我们开发经常会去测试一些代码执行的次数,一般我们都会声明一个变量记录次数,最后console.log
打印结果,其实浏览器内置给我们提供了这种方法。
console.time
和console.timeEnd
计时打印
计时也是非常好用的一种打印方法,为了性能优化,我们可能经常定位一些执行时间较长的代码段,平时很多人会通过Date.now()
计算,但其实浏览器也为我们提供好了这种方法,不仅方便好用而且时间也是格式化好的。