Console对象使用
日志等级类
1.console.log()
在控制台中输出一条信息，这条信息可以是单个字符串，也可以是一个或多个对象。
console.log('log打印');
http://2.console.info()
与console.log作用基本上一致，仅在 Firefox浏览器中，web 控制台的日志中的项目旁边会显示一个小的‘I‘图标。
console.info('info打印');
3.console.warn()
在控制台中输出一条警告信息
console.warn('warn信息');
4.console.error()
在控制台中输出一条错误信息
console.error('error信息');
5.console.debug()
在控制台中输出一条日志等级为“debug”或“verbose”级别的信息，多用于打印调试信息的场景。
此信息默认是不可见的，需要把等级为verbose的日志勾选上才能看到。
console.debug('debug信息')
调试类
1.console.count() & console.countReset()
传入一个字符串作为标签名，记录调用此标签的调用次数。常用于统计某个语句执行次数的场景。
使用console.countReset可以重置次数
console.count("number");console.count("number");console.count("number");console.count("number");console.countReset("number");console.count("number");console.count("number");
2.console.time()
启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。
console.time：记录时间开始
console.timeLog: 打印记录时间开始到此时所花费的时间
console.timeEnd：结束计时，并打印记录时间开始到结束所花费的时间
console.time("time");let a = 0;while(a < 100000) {
a++;}console.timeLog("time");let b = 0;while(b < 10000) {
b++;}console.timeEnd("time");常用于性能分析场景
3.console.trace()
输出打印位置的堆栈信息
function foo() {
function bar() {
console.trace();
}
bar();}foo()
场景举例：当某个方法被多个地方调用时，排查是哪里调用的
4.console.dir()
显示指定javascript对象的属性列表。
场景举例：当打印一个dom元素时，使用console.log打印，在控制台中会显示成dom元素结构，无法查看对象属性
const body = document.querySelector("body");console.log(body);console.dir(body);
美化类
1.console.table()
以表格的形式输出到控制台中
const list = [
{
name: "张三",
age: 21,
school: "清华大学"
},
{
name: "李四",
age: 22,
school: "北京大学"
},
{
name: "王五",
age: 20,
school: "清华大学"
}];console.log(list);console.table(list);
2.console.group()
在控制台中打印内容会被添加到一个分组中展示。
console.group：创建一个分组，后续的打印内容都会添加到此分组中
console.groupCollapsed：与console.group相同，不同点是创建的分组默认是折叠的
console.groupEnd：结束分组打印
console.group("name1");console.log("张三");console.log("李四");console.log("王五");console.groupEnd("name1");console.groupCollapsed("name2");console.log("张三");console.log("李四");console.log("王五");console.groupEnd("name2");
3.console 自定义样式
可以对打印内容添加样式，使用%c作为占位符，%c后面的内容将使用传入的CSS样式进行美化
这里有五种 console 消息类型可以自定义样式：
console.log
console.debug
console.warn
console.error
console.log('%c console.log', 'color: green;'); console.info('%c console.info', 'color: green;'); console.debug('%c console.debug', 'color: green;'); console.warn('%c console.warn', 'color: green;'); console.error('%c console.error', 'color: green;');
也可以设置 style 样式
console.log(
'%c Element UI %c v1.0.0',
'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #5584ff; font-weight: bold;',
'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;',
);
4.Node.js 中设置 console 消息样式
你可以使用 Color Reference 来设置样式。例如：
// 青色console.log('\x1b[36m%s\x1b[0m', 'I am cyan');// 黄色console.log('\x1b[33m%s\x1b[0m', 'yellow' );
console.log(" \x1b[1m\x1b[2m\x1b[32m登录地址:\x1b[0m \x1b[1m\x1b[36mhttp://localhost/login\x1b[0m");console.log(" \x1b[1m\x1b[2m\x1b[32m登录地址:\x1b[0m \x1b[1m\x1b[37mhttp://localhost/login\x1b[0m");console.log(" \x1b[1m\x1b[2m\x1b[32m登录地址:\x1b[0m \x1b[1m\x1b[30mhttp://localhost/login\x1b[0m");console.log(" \x1b[1m\x1b[2m\x1b[32m登录地址:\x1b[0m \x1b[1m\x1b[31mhttp://localhost/login\x1b[0m");console.log(" \x1b[1m\x1b[2m\x1b[32m登录地址:\x1b[0m \x1b[1m\x1b[32mhttp://localhost/login\x1b[0m");console.log(" \x1b[1m\x1b[2m\x1b[32m登录地址:\x1b[0m \x1b[1m\x1b[33mhttp://localhost/login\x1b[0m");console.log(" \x1b[1m\x1b[2m\x1b[32m登录地址:\x1b[0m \x1b[1m\x1b[34mhttp://localhost/login\x1b[0m");