不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

馒头老爸
• 阅读 278

console在前端开发中是最常用到的语法之一,在开发和调试过程中是不可缺少的工具,可以打印调试信息、查看对象内容、性能分析、错误定位等作用。 其中,console.log是最常用的命令,其他console命令在某些场景下更有助于我们的开发调试

日志等级类

1.console.log

在控制台中输出一条信息,这条信息可以是单个字符串,也可以是一个或多个对象。

console.log('log打印');
// log打印

2.console.info

与console.log作用基本上一致,仅在 Firefox浏览器中,web 控制台的日志中的项目旁边会显示一个小的‘I‘图标。

console.info('info打印');
// info打印

3.console.warn

在控制台中输出一条警告信息

console.warn('warn信息');
// warn信息

不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

4.console.error

在控制台中输出一条错误信息

console.error('error信息');
// error信息

不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

5.console.debug

在控制台中输出一条日志等级为“debug”或“verbose”级别的信息,多用于打印调试信息的场景。

此信息默认是不可见的,需要把等级为verbose的日志勾选上才能看到。

console.debug('debug信息')

不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

调试类

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");
​
// number: 1
// number: 2
// number: 3
// number: 4
// number: 1
// number: 2

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");
​
// time: 0.926025390625 ms
// time: 1.085205078125 ms

常用于性能分析场景

3.console.trace

输出打印位置的堆栈信息

function foo() {
    function bar() {
        console.trace();
    }
    bar();
}

不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

场景举例:当某个方法被多个地方调用时,排查是哪里调用的

4.console.dir

显示指定javascript对象的属性列表。

场景举例:当打印一个dom元素时,使用console.log打印,在控制台中会显示成dom元素结构,无法查看对象属性

const body = document.querySelector("body");
console.log(body);
console.dir(body);

不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

美化类

1.console.table

以表格的形式输出到控制台中

const list = [
    {
        name: "张三",
        age: 21,
        school: "清华大学"
    },
    {
        name: "李四",
        age: 22,
        school: "北京大学"
    },
    {
        name: "王五",
        age: 20,
        school: "清华大学"
    }
];
console.log(list);
console.table(list);

不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

2.console.group

在控制台中打印内容会被添加到一个分组中展示。

  • console.group:创建一个分组,后续的打印内容都会添加到此分组中

  • console.groupCollapsed:与console.group相同,不同点是创建的分组默认是折叠的

  • console.groupEnd:结束分组打印

console.group("name");
console.log("张三");
console.log("李四");
console.log("王五");
console.groupEnd("name");
​
console.groupCollapsed("name");
console.log("张三");
console.log("李四");
console.log("王五");
console.groupEnd("name");

不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

3.console.log

可以对打印内容添加样式,使用%c作为占位符,%c后面的内容将使用传入的CSS样式进行美化

console.log(
'%c antd Design %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;',
);

不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

往期推荐 前端手写Promise.all,你不知道的多个知识点,比想象中更精彩!

利用CSS延迟动画,打造令人惊艳的复杂动画效果!

10分钟掌握HTML拖放API!让你的网页元素瞬间拥有拖拽功能,轻松提升用户体验!

个人网站:www.dengzhanyong.com 关注我的公众号【前端筱园】,不错过每一篇推送 不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍

点赞
收藏
评论区
推荐文章
Alex799 Alex799
3年前
Vue进阶(幺陆柒):Vue项目调试技能
前言在Vue项目开发过程中,当你遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要。同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
VBox 启动虚拟机失败
在Vbox(5.0.8版本)启动Ubuntu的虚拟机时,遇到错误信息:NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
Wesley13 Wesley13
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
2年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Easter79 Easter79
2年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_