使用有颜色的 Console 信息
开发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() 之外的调试技巧”。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-12-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读