美化console

news2024/9/29 11:41:45

console简介

控制台（Console）是JS开发里最重要的面板，主要作用是显示网页加载过程中产生各类信息,我们经常使用console.log()这个函数在控制台打印一些东西
在这里插入图片描述

但是,console这个对象不仅仅有log这个函数,还有很多其他的函数,如下

console.debug() 打印调试信息

在这里插入图片描述
我们可以看到没有打印任何信息,这是因为浏览器默认隐藏调试信息的,需要我们去选择显示verbose才能看到

console.debug()打印的信息和console.log()打印的信息没有任何区别,只是浏览器会把它归类到verbose这个类型里面去,

verbose这个类型显示的级别很低,比如说页面上有一个循环,这个循环卡的时间比较长,它就会被显示到这个地方,默认情况下,浏览器是不会显示verbose这个类型的打印信息的

console.log() 打印信息

这个就不讲了,没啥好说的

console.info() 打印info级别的消息

console.info()和console.log()差不多,在谷歌浏览器里面它们显示也完成一样,

ps:
在某些浏览器里面显示的可能会不一样,比如说在firefox浏览器里面,console.info会带一个感叹号小图标

在这里插入图片描述

console.table() 打印信息以表格显示

这个还是蛮有用的,比如说打印一些对象数组,如果使用console.log()的话,打印的是如下
在这里插入图片描述
不是很利于直观的观看数据,这个时候可以使用console.table(),示例如下

他会将数据的每一个对象的每一个属性,形成一个列,而且这些列是可以排序的,比如说下面,按照名字顺序排序
在这里插入图片描述

console.group() 分组

console.group()的使用场景是,比如要打印很多同一类型的消息,这个时候就可以给这些消息分组,它们就会显示在一起

代码如下

    const label = 'student'
    console.group(label)
    console.log('zhangsan')
    console.log('lisi')
    console.log('wangwu')
    console.log('zhaoliu')
    console.log('tianqi')
    console.groupEnd(label)

输出如下
在这里插入图片描述
tips: 使用console.group()打印分组默认是展开的,如果不想默认展开,可以使用console.groupCollapsed(),
console.groupCollapsed(),打印的分组默认是折叠的

console.dir()打印对象结构

使用场景一般是打印html元素的时候,如果直接使用console.log()打印的话,浏览器会对它进行一些处理,这并不是我们想要的
示例如下

在这里插入图片描述
console.log()打印html元素的时候会直接打印元素结构,有些使用我们更希望看到的是这个元素的对象结构
这时候就需要使用console.dir()

示例如下
在这里插入图片描述

console.time() & console.timeEnd() 计时

time()与timeEnd()这两个方法用于记录这两个方法中间的代码运行了多长事件
tips: 使用time()与timeEnd()这两个方法计算的时间并不是很精确,因为js是单线程的

示例如下

    console.time('time')
    let a = 0
    for (let i = 0; i < 100; i++) {
      a += i
    }
    console.timeEnd('time')

循环100次用了0.038818359375 ms
在这里插入图片描述

console.count() 计数

就是每调用一次console.count()的时候,会让count里面的参数加一,免得我们去声明无意义的变量

示例如下

	console.time('time')
	for (let i = 0; i < 1000; i++) {
	  console.count('count')
	}
	console.countReset('count')
	console.timeEnd('time')

tips :: countReset()是清除计数

在这里插入图片描述

console.trace() 堆栈

console.trace()会打印当前代码所在的堆栈

示例如下

    function one() {
      console.trace()
    }
    function two() {
      one()
    }
    two()

这段代码的意思是,one调用的console.trace(),如何two调用了one,然后全局调用了two

这个函数很有用,在大型项目内能帮我们分辨函数到底是被谁调用了
在这里插入图片描述

console.assert() 断言

console.assert() 主要是帮我们简化代码测试
console.assert() 是一个非常实用的JavaScript函数，它主要用于简化代码测试。通过使用console.assert()，你可以设定一个断言，当代码的执行结果为真时，它不会做任何处理。然而，如果代码的结果为假，console.assert()会在控制台中报告错误。
示例如下

	console.assert(1 === 2, "1 is not equal to 2");

在这里插入图片描述

console.warn()打印警告

这个没什么好说的和console.log()没什么大区别,就是打印的信息会有样式的不同,而且控制台显示分组不同
示例如下
在这里插入图片描述

console.error()打印错误

和console.warn()一样,不多做介绍

在这里插入图片描述

console.clear()清空消息

字面意思,清空控制台前面打印的消息

    console.log('one')
    console.log('two')
    console.clear()
    console.log('three')

如下,1和2没了
在这里插入图片描述

给console添加样式

console打印的消息是可以添加样式信息的,示例如下

	const style = `
	padding: 5px;
	background-color: aqua;
	color: blueviolet;
	font-style: italic;
	border: 5px solid #E05E3C;
	font-size: 2em;
	`
	console.log('%cThe following is a print message with styles', style)

在这里插入图片描述