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