开发JS时经常会使用 console
来输出调试信息,其实 console 支持一个非常有意思的功能,就是可以设置信息的样式。
这有什么用呢?主要就是帮助我们在控制台中更好的识别输出信息。
尤其是应用中有大量日志的场景中,有样式的日志就会让你快速找到你所关注的内容,不至于淹没在日志海洋中。
示例:
console.log('%cHello', 'color: green; background: yellow; font-size: 30px');
%c
用于把指定的样式应用到输出字符串上。
可以定义更加复杂的样式:
const styles = [
'color: green',
'background: yellow',
'font-size: 30px',
'border: 1px solid red',
'text-shadow: 2px 2px black',
'padding: 10px',
].join(';');
console.log('%cHello There', styles);
还可以使用 %s
作为字符串占位符:
const styles = ['color: green', 'background: yellow'].join(';');
const message = 'Some Important Message Here';
console.log('%c%s', styles, message);
一个小小的样式功能就可以提高我们开发调试时的效率。
本文翻译整理自:
https://medium.com/@samanthaming/colorful-console-message-2e8203786838
console 还有更多有用的小功能,有兴趣可以看下“console.log() 之外的调试技巧”。