我所不知道的console对象的用法

我所不知道的console对象的用法

技术杂谈小彩虹2021-08-26 1:42:52210A+A-

从学web前端开发至今,我一直使用document.write()和console.log()进行调试,今天发现了console对象的新用法,所以写下这篇记录文档。

console对象

console对象是JavaScript的原生对象,可以输出各种信息到控制台。

console的用途

  • 调试程序,显示网页代码运行时的错误信息

  • 提供一个命令行接口,用于与网页代码互动

console对象的静态方法

console对象提供的各种静态方法,用来与控制台窗口互动

1、console.log()

用于在控制台输出信息,可以接收一个或多个参数连接起来输出

// 例:
console.log('一个参数');  //输出:一个参数

console.log('这是','传入','多个参数','的用法');  //输出:这是  传入  多个参数  的用法

//支持占位符
console.log(' %s + %s = %s',1,2,3);  输出:1 + 2 = 3;

支持以下占位符

%s  字符串
%d	整数
%i	整数
%f	浮点数
%o	对象的链接
%c	css格式字符串

console.log()每次输出的结尾,自动添加换行符

%c的神奇用法

2、console.info()

是console.log()的别名,用法完全一致。【ps:网上说这两者的唯一区别是console.info()方法会在输出信息的前面加上一个蓝色图标。然而,我使用Chrome调试时,并没有蓝色图标】

//例:
console.info('使用console.info()形式输出');
3、console.debug()

使用方法与console.log()方法的使用类似,但是一般情况下,console.debug()输出的信息不会显示,以下是对Chrome浏览器进行设置,使控制台可以查看到console.debug()输出的信息

//例:
console.debug('使用console.debug()方法进行调试');
4、console.warn()

使用方法与console.log()类似,不同的是控制台上的输出样式不一样,console.warn()输出前面带有“黄色的三角形”,表示警告,具体输出样式如下:

//例:
console.warn('这是console.warn()方法输出的信息');
5、console.error()

使用的方法与console.log()类似;区别:console.error()方法在控制台输出的信息样式不同,console.error()信息输出前面会有一个“红色的X”以及字体颜色也是红色的,表示出错了。具体显示的样式如下:

//例:
console.error('这是使用console.error()方法输出的信息');

小结:console.log()方法写入标准输出;console.error()和console.warn()写入标准错误

6、console.table()

对于某些复合类型的数据,console.table()方法可以将其转为表格显示

//例:
var languages = [
    {
        name:'JavaScript',
        fileExtension:'.js'
    },
    {
        name:'php',
        fileExtension:'.php'
     },
     {
         name:'css',
         fileExtension:'.css'
      }
]
console.table(languages);

输出的效果图如下:

7、console.count()

console.count()方法用于计数,输出被调用了多少次

//例:
function greet(user){
    console.count();
    return 'hi' + user;
}

greet('chen');  //输出:1
greet('cyq');   //输出:2
greet('hehe');  //输出:3

解析:3:表示greet()函数被调用了3次

console.count()可以传入一个参数,并且根据传入的参数进行分组统计被调用的次数

//例:
function greet1(user){
   console.count(user);
   return 'hi ' + user;
}
greet1('chen');  //输出:1
greet1('cyq');  //输出:1
greet1('chen');   //输出:2
8、console.dir()

使用console.dir()方法对一个对象进行检查,并易于阅读和打印的格式显示

例:
console.log({f1:'foo',f2:'bar'});
console.dir({f1:'foo',f2:'bar'});

输出的样式如下:

以上console.dir()输出的结果比console.log()输出的结果更容易阅读,信息更丰富,该方法用于输出DOm对象灰常有用。

9、console.dirxml()

console.dirxml()方法主要用于以目录树的形式,显示DOM节点,若参数不是DOM节点,而是普通JS对象,则等同于console.dir()方法

具体的使用如下图:

10、console.assert()

console.assert()方法主要用于程序运行中,进行条件判断,若不满足,则显示错误信息,不会中断程序执行。相当于提示用户,内部状态不正确。

此函数接收两个参数

  • 参数1:表达式

  • 参数2:字符串

当第一个参数为false时,才会提示有错误,在控制台输出第二个参数,否则不输出任何结果

11、console.time()和console.timeEnd()

这两个方法用于计时,可以算出一个操作所花费的准确时间。console.time()方法用于计时开始,console.timeEnd()用于计时结束。他们的参数是:计时器的名称

//例:
console.time('Array initialize');

var array = new Array(100000);
for(let i = array.length-1;i>=0;i--){
    array[i] = new Object();
};

console.timeEnd('Array initialize');  //输出:Array initialize: 81.444091796875ms    【ps:计时器名称:所耗费的时间】
12、console.group() 和 console.groupEnd() 和 console.groupCollapsed()

console.group()和console.groupEnd()用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。

//例:
console.group('一级分组');
console.log('一级分组的内容');

console.group('二级分组');
console.log('二级分组的内容');

console.groupEnd(); //一级分组结束
console.groupEnd(); //二级分组结束

输出的结果如下:

console.groupCollapsed方法与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的

//例:
console.groupCollapsed('一级分组');
console.log('一级分组的内容');

console.groupCollapsed('二级分组');
console.log('二级分组的内容');

console.groupEnd(); //一级分组结束
console.groupEnd(); //二级分组结束

效果图如下

13.console.trace()

console.trace方法显示当前执行的代码在堆栈中的调用路径

//例:
console.trace()

结果图如下:

14、console.clear()

console.clear方法用于清除当前控制台的所有输出,将光标回置到第一行。如果用户选中了控制台的“Preserve log”选项,console.clear方法将不起作用。

//例:
console.clear();

[ps:本文档所展示的测试用例都是在Chrome环境下进行测试的]

参考文档

console对象

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们