Chrome控制台小技巧：console.dir、console.assert、console.count 让信息查找变得轻松

小伙伴们，给你们说个好玩儿的东西！你试过在控制台查看更多有效信息吗？不只是简单的变量值，还有很多小秘密！快去瞧瞧好了！

1. 传入一个变量
const a = 1;
console.log(a); // -> 1
2. 传入一个对象
const foo = {a: 1};
console.log(foo); // -> {a: 1}
3. 传入多个变量
console.log(a, foo); // -> 1 {a: 1} 

const string = 'Glory of Kings';
const number = 100;
const float = 9.5;
const obj = {name: 'daji'};
1、%s 字符串占位符
console.log('I do like %s', string); // -> I do like Golry of Kings.
2、%d 整数占位符
console.log('I won %d times', number); // -> I won 100 times.
3、%f 浮点数占位符
console.log('My highest score is %f', float); // -> My highest score is 9.5
4、%o 对象占位符
console.log('My favorite hero is %o', obj); // -> My favorite hero is {name: 'daji'}.
5、%c CSS样式占位符
console.log('I do like %c%s', 'padding: 2px 4px;background: orange;color: white;border-radius: 2px;', string);

用console.log看变量和实体对象其实挺方便的，能传几样参数就把它们全都打印出来。但是，有时候你可能更想知道某个DOM节点到底有啥。这种情况怎么办？

const response = [
 {
  id: 1,
  name: 'Marry',
  age: 18,
  sex: 0
 },
 {
  id: 2,
  name: 'John',
  age: 20,
  sex: 1
 }
];

对，console.dir真的是个好帮手！加点小技巧，就能避开不想看到的冗余信息，只给你想找的东西。轻松搞定，这下你要的信息找着就没那么费劲了

怎么搞呀？现有的数据不知道行不行，难道非得逐个检查吗？

function foo(data) {
 if (data === null) {
  console.trace();
  return [];
 }
 return [data.a, data.b];
}
function bar1(data) {
 return foo(data);
}
function bar2(data) {
 return foo(data);
}
bar1({a: 1, b: 2}); // -> [1, 2]
bar2(null); // -> []

对，试试console.assert()呗！这货直接在控制台上给你看断言结果，一目了然告诉你合不合规范。今后校验数据就方便多！

你知道 console.count() 这个神奇工具吗？它都有些什么用处？

for (let i = 1;i <= 5;i++) {
  if (!(i % 2)) {
    console.count('even');
  } else {
    console.count('odd');
  }
}

要加个计数器轻松搞定！只需添rc.count()这一句，想数数字就能立马在控制台上知道咯~

看这儿！没想到？不靠jQuery也可以在Chrome的控制台里搞DOM对象！告诉你几个好用的秘诀：如console.dir、console.assert和console.count，它们能帮你快速找到想要的信息，提高效率！试一下呗，别忘了点赞分享，嘿嘿～

const startTime = performance.now();
let sum = 0;
for(let i = 0;i < 100000;i++) {
  sum += i;
}
const diffTime = performance.now() - startTime;
console.log(`Execution time: ${ diffTime }`);

console.time('sum');
let sum = 0;
for(let i = 0;i < 100000;i++) {
  sum += i;
}
console.timeEnd('sum');