web 开发调试中的 console 对象

 JS原生中是没有console对象的，这是宿主对象（浏览器）提供的内置对象。用于访问控制台，在不同的浏览器中可能显示的不一样。
 // 通过下面代码可以看到console中所有的对象方法
 console.log(console);

一、输出调试信息
 // console.log方法用于在控制台输出信息。它可以接受多个参数，逗号分隔。它会自动在每次输出的结尾，添加换行符。没有返回值回会返回undefined。
 console.log();
 console.info();
 console.debug();
 console.error();
 // 方法用于输出错误和警告信息，用法和常见的console.log方法一样，不同点在于输出时候的表现形式。一个是黄色的警告形式一个是红色的错误形式。而console.error()方法会标记为错误的地方。
 console.warn();
 // 如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出。
 占位符格式如下表：
 模式     类型
 %s     字符串
 %d,%i     整数
 %f     浮点数
 %o     对象超链接
 %c     CSS格式化样式

二、console 的断言方法
 // 接收至少两个参数，第一个参数的值或返回值为false的时候，将会在控制台上抛出一个异常并将其余参数作为异常描述输出.

       console.assert(false,123) //抛出错误，并且输出，返回undefined

       console.assert(true,123) //没有错误，返回undefined

三、计数

// 用于统计代码执行次数
 console.count()

(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();

 console.count()方法里面可以传入一个字符串作为参数，作为标签，对执行次数进行分类
 

function greet(user) {
console.count(user);
return "hi " + user;
}
greet('bob')
greet('alice')
greet('bob')

// 清空控制台内容
 console.clear()
 // 方法用来对一个对象进行检查，并以易于阅读和打印的格式显示。
 console.dir()

var obj = {
name: 'c',
age: '20',
type: '1'
};
console.dir(obj);

var arr = [1,2,3]
console.dir(arr)

var s = 'sdfs'
console.dir(s)

var n = '123'
console.dir(n)

// 方法可以将传入的对象或数组这些复合数据以表格形式输出。
 console.table()

var arr= [
{ num: "1"},
{ num: "2"},
{ num: "3" }
];
console.table(arr);

var obj= {
a:{ num: "1"},
b:{ num: "2"},
c:{ num: "3" }
};
console.table(obj);

四、计算执行时间
 // console.time(),console.timeEnd()方法计算一个操作的执行的时间console.time()是开始，console.timeEnd()是结束。可以传一个参数，参数为计时器的名称。
 console.time(),
 console.timeEnd()
 

console.time('计时器1');
for (var i = 0; i < 100; i++) {
for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器2');

五、信息分组显示
 // 这两个方法用于将显示的信息分组，可以把信息进行折叠和展开。他们都可以传递一个参数，参数默认是分组名。

用法都是一样的。唯一区别就是console.group()是默认展开的，而console.groupCollapsed()默认是收起的。
 console.group();
 console.groupCollapsed();
 

console.group('第一层');
console.group('第二层');

console.log('error');
console.error('error');
console.warn('error');

console.groupEnd();
console.groupEnd();

console.groupCollapsed('第一层');
console.groupCollapsed('第二层');

console.log('error');
console.error('error');
console.warn('error');

console.groupEnd();
console.groupEnd();

六、性能测试器
// 方法就比较高大上点了，用来新建一个性能测试器，可以评估某段代码的性能，可以传一个参数，为生成的性能测试器的名字。
console.profile();
 console.profileEnd();

function profile() {
for (var i = 0; i < 10000; i++) {
i++;
}
}
console.profile('性能分析');
profile();
console.profileEnd();

七、方法追踪
 //方法用来追踪函数的调用过程。在复杂的架构中可以查找到对应的调用路径。
 console.trace()
 

function d(a) {
console.trace();
return a;
}
function b(a) {
return c(a);
}
function c(a) {
return d(a);
}
var a = b('123');