专栏首页白玉无冰JavaScript | 为你的日志添加颜色【译】

JavaScript | 为你的日志添加颜色【译】

console里添加%c说明符?‍?。这可以帮助你很容易找到你要打印的日志?。特别是在一个有着成千上万个日志的大型应用中,给你的日志加上样式,就不会让你重要的日志埋没。或者说,这可以提醒人们离开控制台。就像在facebook网站中,你打开控制台,会见到一个大大的红色的Stop!。现在你应该懂得它的用处了?。

// 在你的浏览器里的控制台输入
console.log('%cHello', 'color: green; background: yellow; font-size: 30px');

%c是什么

你可以使用%c为打印内容定义样式,在它之前的内容不会被影响,而会影响后面的内容。

使用多个样式

想要使用多个样式,你只需在你想要的日志前加上%c。在这之后的日志就会根据后面样式的顺序显示。

console.log(
  'Nothing here %cHi Cat %cHey Bear',  // Console 日志
  'color: blue', 'color: red' // CSS 样式
);

为其他的 console 加样式

还有5种方式打印日志:

  • console.log
  • console.info
  • console.debug
  • console.warn
  • console.error

同样的,你也可以为他们加上样式。

console.log('%cconsole.log', 'color: green;');
console.info('%cconsole.info', 'color: blue;');
console.debug('%cconsole.debug', 'color: yellow;');
console.warn('%cconsole.warn', 'color: fuchsia;');
console.error('%cconsole.error', 'color: red;');

使用数组传入 CSS 样式

当你的样式比较复杂的时候,用字符串表示样式会特别长。有个漂亮的写法是用数组和join()方法连成字符串。

// 1. 用数字保存
const styles = [
  'color: green', 
  'background: yellow', 
  'font-size: 30px',
  'border: 1px solid red',
  'text-shadow: 2px 2px black',
  'padding: 10px',
].join(';'); // 2. 链接成字符串

// 3. 传入样式
console.log('%cHello There', styles);

结合 %s 一起使用

同样也可以结合 %s 一起使用。

const styles = ['color: green', 'background: yellow'].join(';');
const message = 'Some Important Message Here';
// 3. 传入样式和日志
console.log('%c%s', styles, message);

本文分享自微信公众号 - 白玉无冰(lamyoung-com),作者:lamyoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cocos creator | 用摄像机实现局部缩放的效果

    多摄像机的支持可以让你轻松实现高级的自定义效果,比如双人分屏效果,或者场景小地图的生成。

    白玉无冰
  • CocosCreator之KUOKUO带你做物理切割(第二部分)

    通过上一部分的教程,我们已经知道了单切割的原理,但是很显然,KUOKUO 的第一篇博客显得不通用,只能切割一个物体。那么如何切割多个物体呢?

    白玉无冰
  • 五个技巧让你程序卡起来!一般人我不告诉他的卡顿秘籍!cocos creator !

    分享几个可以让你的cocos creator 程序卡起来的方法,自己在平时项目中也经常用到 :D

    白玉无冰
  • Android开发之自定义组件和接口回调

    说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的。在这篇博客开始的时候呢,我想聊一下iOS的自定义控件。在iOS中自定义控件的...

    lizelu
  • JS入门之数据类型

    在js中,数据类型分为两大类,一类是基本数据类型,另一类是引用数据类型。在这里,我们先讲基本数据类型。

    邂逅千寻
  • python导入模块--import--1

        python前面写的程序,后面就可以将它当成一个模块导入,取其精华舍弃不用的随意使用,最理想的情况是任何一个功能,只要写一次,以后所有人都可以任意调用,...

    py3study
  • Shell(一)好的操作习惯

    前一段时间顺丰运维人员将生产数据库删除的传闻着实成为了新闻热词,如果传闻是真的,相信那位运维也是无心之过,可能只是一瞬的手误。但是代价太大了,业内人员都懂的。

    一只羊
  • 医学影像组学特征值(Radiomics Features)提取之Pyradiomics(一)理论篇

    医学影像组学特征值(Radiomics Features)提取之pyradiomics(一)理论篇

    Minerva
  • Origin复制图形格式

    DrawSky
  • Python编程Day3—基本运算符、数

    了解: 1 x='abcdef' y='abce' print(x>y) 1 l1=[2,'abc',3] l2=[2,'3'] print(l2>l1)

    py3study

扫码关注云+社区

领取腾讯云代金券