是时候停止使用console.log()啦

Categories: JavaScript

因为有更好的选择！

作为一个前端开发者你是不是经常使用console.log()来测试你的代码？这当然没有错，但是你也许不知道在console这个对象中还有很多令人惊奇的方法可以使用。这篇文章中我会介绍下如何有效使用这些非常棒的方法。

为什么使用console对象？

这个console对象是JavaScript提供对浏览器调试控制台进行访问，你可以在调试控制台上打印一些信息，比如你的代码变量值。这个经常作为开发者调试代码的一种手段。我觉得大部分开发者只会使用console.log()这个方法来打印对象，但是它还有好几个别的有用的方法。

1. console.log()

这个方法用来打印数据到调试控制台上，它可以传入任何类型的数据，比如 string，array，object，boolean等等。 样例：

console.log('JavaScript');
console.log(7);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3]);
console.log({a: 1, b: 2, c: 3});

-w417

2. console.error()

这个error方法在调试代码的时候就非常有用了，它会打印error信息到控制台，并且会用红色高亮的方式打印出error信息。 样例：

console.error('Error found');

-w427

3. console.warn()

同样的这个方法也会打印信息到控制台，但是它是警告信息，所以默认的这个信息是会用黄色高亮的方式来打印出warn信息。 样例：

console.warn('Warning!');

-w418

4. console.clear()

这个方法是用来清除控制台信息，如果控制台有太多的消息和错误信息就可以用这个方法来清除。 清除完成后会打印一条消息说控制台已经被清除。 样例：

console.clear()

-w419

5. console.time() 和 console.timeEnd()

这两个方法对开发调试就非常有用了，它们需要结合起来使用。比如你需要知道执行某一个方法或者一段代码需要多少时间，那我们就可以用console.time() 和console.timeEnd()方法。这两个方法都需要传入同一个字符串作为标记，用来计算时间间隔。 样例：

console.time('timer'); 
const hello =  function(){
  console.log('Hello Console!');
}
const bye = function(){
  console.log('Bye Console!');
}
hello(); // calling hello();
bye(); // calling bye();
console.timeEnd('timer');

-w407

6. console.table()

这个方法比较有意思，它会把数据按照表格的形式打印出一个对象或者一个数组，这样会让打印结果跟好阅读。 样例：

console.table({a: 1, b: 2, c: 3});

-w593

7. console.count()

这个方法用来计数的，可以记录特定的值或者函数被执行了多少次。 样例1:

function ab() {
  console.log("ab")
  console.count()
}
for (var i = 0; i < 3; i++) {
  ab()
}

-w382

样例2:

function ab(name) {
      console.count(name)
    }
    var name = 'bob'
    ab(name)
    name = 'alice'
    ab(name)
    console.count('alice')

-w377

8. console.group() 和 console.groupEnd()

这两个方法和time()和timed()一样需要配对使用，也同时需要传入同一个字符串作为标识，然后它会把这两个方法之间的所有console打印都放到一个组里面，可以展开或收缩起来。 样例：

console.group('group1'); 
  console.warn('warning'); 
  console.error('error'); 
  console.log('I belong to a group'); 
console.groupEnd('group1'); 
console.log('I dont belong to any group');

-w388

还有惊喜：自定义log打印内容的样式

还有一个非常棒的功能是你可以自定义控制台日志的样式。它非常简单，只需要你添加一些css样式代码把它放到log函数里面，并在log日志字符串前面加上 %c 这个特殊符号，这样你打印出来的日志样式就变成你css写的样式了。 样例：

const spacing = '10px'; 
const styles =  `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`; 
console.log('%cI am a styled log', styles);

-w471

最后

这个console对象对于一个开发者调试代码是非常有帮助的。我们作为开发者不能只是会用log方法，console对象有这么多有用的方法我们应该用起来，这对我们开发还是有很大的帮助的。 非常感谢阅读！

The End !

Twitter Icon
Facebook Icon