从学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环境下进行测试的]