是时候停止使用console.log()啦
因为有更好的选择!
作为一个前端开发者你是不是经常使用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});
2. console.error()
这个error方法在调试代码的时候就非常有用了,它会打印error信息到控制台,并且会用红色高亮的方式打印出error信息。 样例:
console.error('Error found');
3. console.warn()
同样的这个方法也会打印信息到控制台,但是它是警告信息,所以默认的这个信息是会用黄色高亮的方式来打印出warn信息。 样例:
console.warn('Warning!');
4. console.clear()
这个方法是用来清除控制台信息,如果控制台有太多的消息和错误信息就可以用这个方法来清除。 清除完成后会打印一条消息说控制台已经被清除。 样例:
console.clear()
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');
6. console.table()
这个方法比较有意思,它会把数据按照表格的形式打印出一个对象或者一个数组,这样会让打印结果跟好阅读。 样例:
console.table({a: 1, b: 2, c: 3});
7. console.count()
这个方法用来计数的,可以记录特定的值或者函数被执行了多少次。 样例1:
function ab() {
console.log("ab")
console.count()
}
for (var i = 0; i < 3; i++) {
ab()
}
样例2:
function ab(name) {
console.count(name)
}
var name = 'bob'
ab(name)
name = 'alice'
ab(name)
console.count('alice')
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');
还有惊喜:自定义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);
最后
这个console
对象对于一个开发者调试代码是非常有帮助的。我们作为开发者不能只是会用log
方法,console
对象有这么多有用的方法我们应该用起来,这对我们开发还是有很大的帮助的。
非常感谢阅读!
The End !