Covh

V1

2022/01/23阅读:50主题:橙心

不会吧,不会吧,不会真的有人只用console.log吧

都2022年了,应该不只是会用console.log吧,很多人对console.log不陌生, 但是,有一部分console的方法在开发和调试工作流程中都非常有用,一起来看看吧

Console API

console.time

有时候我们需要统计一段脚本的执行时间,或者是接口请求的准确时间,很多同学是在要统计的开始的地方定义一个起始变量,然后在代码结束的时候定义一个结束时间的变量,二者相减,得到了这段代码的执行时长

    var startTime = new Date().getTime();
    // some code ...
    var endTime = ne Date().getTime();
    var dur = endTime - startTime
    console.log("上面代码的执行时间为"+dur+"毫秒");

是不是你呢😊

其实可以使用console提供的console.time 来处理

这里使用菜鸟教程中的部分代码作为演示

console.time('计时器1');
for (var i = 0; i < 100; i++) {
  for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
image.png
image.png

看吧,是不是很方便,console.time中,可以指定一个标识符名称,字符串类型,并且console.time和console.timeEnd中是同一个标识符,这样浏览器可以解析出来两段时间之间的时间间隔

console.count

顾名思义,console.count 就是用来计数的,输出当前括号内的这个变量被执行了多少次

console.count("a")
console.count("a")
console.count("a")

结果:

image.png
image.png

常常用于在vue或者react render方法里面,可以很清晰的看到render了多少次

console.group

这个api是讲输出的内容进行分组,避免log过于混乱

同样拿菜鸟教程中的代码做示范


console.group('第一层');
  console.group('第二层');

    console.log('error');
    console.error('error');
    console.warn('error');

  console.groupEnd(); 
console.groupEnd();

结果:

image.png
image.png

这几个不常用的api但是却很好用,希望可以帮到大家

感谢点赞收藏!

关于我

微信:cjs764901388

公众号:xstxoo

我的公众号:小松同学哦

可以关注我,一起学习前端知识,喜欢把生活中用到技术的地方记录下来

分类:

前端

标签:

前端

作者介绍

Covh
V1