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