console对象是JavaScript的原生对象，可以输出各种信息到控制台，并且还提供了很多额外的有用方法。
它的常见用途有两个。
调试程序，显示网页代码运行时的错误信息。
提供了一个命令行接口，用来与网页代码互动。
console.assert()
判断第一个参数是否为真，false的话抛出异常并且在控制台输出相应信息。
assert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。
1 | console.assert(true === false, '判断条件不成立') |
2 | // Assertion failed: 判断条件不成立 |
console.clear()
清空控制台。
console.count()
以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。
1 | function greet(user) { |
2 | console.count(); |
3 | return 'hi ' + user; |
4 | } |
5 | |
6 | greet('bob') |
7 | // : 1 |
8 | // "hi bob" |
9 | |
10 | greet('alice') |
11 | // : 2 |
12 | // "hi alice" |
13 | |
14 | greet('bob') |
15 | // : 3 |
16 | // "hi bob" |
该方法可以接受一个字符串作为参数，作为标签，对执行次数进行分类。
1 | function greet(user) { |
2 | console.count(user); |
3 | return "hi " + user; |
4 | } |
5 | |
6 | greet('bob') |
7 | // bob: 1 |
8 | // "hi bob" |
9 | |
10 | greet('alice') |
11 | // alice: 1 |
12 | // "hi alice" |
13 | |
14 | greet('bob') |
15 | // bob: 2 |
16 | // "hi bob" |
console.log()，console.info()，console.debug()
console.log方法向web控制台输出一条消息。
1 | console.log('Hello World') |
2 | // Hello World |
3 | |
4 | console.log(1); |
5 | console.log(2); |
6 | console.log(3); |
7 | // 1 |
8 | // 2 |
9 | // 3 |
console.log方法支持以下占位符，不同格式的数据必须使用对应格式的占位符。
%s 字符串
%d 整数
%i 整数
%f 浮点数
%o 对象的链接
%c CSS格式字符串
1 | console.log(' %s + %s = %s', 1, 1, 2) |
2 | // 1 + 1 = 2 |
3 | |
4 | var number = 11 * 9; |
5 | var color = 'red'; |
6 | console.log('%d %s balloons', number, color); |
7 | // 99 red balloons |
console.info()和console.debug()都是console.log方法的别名，用法完全一样。只不过console.info方法会在输出信息的前面，加上一个蓝色图标。
console.dir()，console.dirxml()
console.dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
语法
console.dir(object);
参数
object
打印出该对象的所有属性和属性值。
console.dirxml方法主要用于以目录树的形式，显示DOM节点。
1 | console.dir([1, 2, 3]) === console.dirxml([1, 2, 3]) |
2 | //true |
console.error()，console.warn()
console.error()向web控制台输出一条错误消息。
console.warn()向 web 控制台输出一条警告信息。
1 | console.error('Error: %s (%i)', 'Server is not responding', 500) |
2 | // Error: Server is not responding (500) |
3 | |
4 | console.warn('Warning! Too few nodes (%d)', document.childNodes.length) |
5 | // Warning! Too few nodes (1) |
console.group()，console.groupend()，console.groupCollapsed()
console.group和console.groupend这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
1 | console.group('Group One'); |
2 | console.group('Group Two'); |
3 | |
4 | // some code |
5 | |
6 | console.groupEnd(); // Group Two 结束 |
7 | console.groupEnd(); // Group One 结束 |
console.groupCollapsed方法与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。
1 | console.groupCollapsed('Fetching Data'); |
2 | |
3 | console.log('Request Sent'); |
4 | console.error('Error: Server not responding (500)'); |
5 | |
6 | console.groupEnd(); |
上面代码只显示一行”Fetching Data“，点击后才会展开，显示其中包含的两行。
console.profile()，console.profileEnd()
console.profile方法用来新建一个性能测试器（profile），它的参数是性能测试器的名字。
1 | console.profile('p') |
2 | // Profile 'p' started. |
console.profileEnd方法用来结束正在运行的性能测试器。
1 | console.profileEnd() |
2 | // Profile 'p' finished. |
console.table()
对于某些复合类型的数据，console.table方法可以将其转为表格显示。
1 | var languages = [ |
2 | { name: "JavaScript", fileExtension: ".js" }, |
3 | { name: "TypeScript", fileExtension: ".ts" }, |
4 | { name: "CoffeeScript", fileExtension: ".coffee" } |
5 | ]; |
6 | |
7 | console.table(languages); |
转化为表格显示如下：
| (index) | Value | Qty |
|---|---|---|
| 0 | “JavaScript” | “.js” |
| 1 | “TypeScript” | “.ts” |
| 2 | “CoffeeScript” | “.coffee” |
console.time()，console.timeEnd()
这两个方法用于计时，可以算出一个操作所花费的准确时间。
1 | console.time('Array initialize'); |
2 | |
3 | var array= new Array(1000000); |
4 | for (var i = array.length - 1; i >= 0; i--) { |
5 | array[i] = new Object(); |
6 | }; |
7 | |
8 | console.timeEnd('Array initialize'); |
9 | // Array initialize: 1914.481ms |
time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，console窗口会显示“计时器名称: 所耗费的时间”。
console.trace()
console.trace方法向Web控制台输出一个堆栈跟踪。