zoukankan      html  css  js  c++  java
  • 多彩的Console打印新玩法

    Chrome应该是每一个Web开发者必备的工具之一。它有而强大的Devtool,辅助我们的JavaScript调试,审视DOM元素,CSS即时修改等。以及它还有一个的庞大的插件系统,同时我们也可以很容易的扩展属于自己的Chrome插件。如果希望了解更多的Chrome常用调试,请参见笔者早期的微信推送文章《15个必须知道的chrome开发者技巧》

    Chrome中的控制台console,是我们检查程序允许是否正常的常用工具之一,同时它也是我们打印调试日志信息,运行调试代码的常用工具。在国内近几年,它也成为了程序员招聘的渠道之一。如下面百度的招聘信息:

    百度console招聘

    在Console中打印日志的方式有log、info、warn、error这几类方式。但它们并不是本文的主题。对于日志信息打印来说,一直都显得很单调。直到最新版的Chrome和Firefox (+31),我们可以尝试更多多彩的打印格式了。在最新的Google chrome文档中console.log支持如下的格式:

    1. %s 字符串格式化;
    2. %d/%i 整数格式化;
    3. %f 小数位数据格式化;
    4. %o 可扩展的DOM节点格式化;
    5. %O 可扩展的JavaScript对象格式化;
    6. %c 利用CSS来自定义样式格式化输出。

    本文将要说的就是%c这个格式化器。我们可以利用CSS样式来控制打印信息的输出。这样我们就可以得到一个多彩的日志信息,或者就是招聘广告了。

    下面代码输出效果为:

    console.log('%c [破狼]-[双狼说]!', 'background: #008000; color: #fff');
    

    效果:

    彩色的console log

    再如:下面这段来自http://stackoverflow.com/questions/7505623/colors-in-javascript-console示例,文字光影的效果:

    代码比较长,请移步到stackoverflow查看。这里主要是利用的text-shadow这个CSS3特性来实现的,文字光影效果:

    var css = "text-shadow: -1px -1px hsl(0,100%,50%), 1px 1px hsl(5.4, 100%, 50%), 3px 2px hsl(10.8, 100%, 50%), .....";// 
    
    console.log("%cExample %s", css, 'all code runs happy');
    

    效果如下:

    彩色的console log

    在github也有log的repo,感兴趣的读者也可以研究研究。

  • 相关阅读:
    1.Mybatis的全局配置mybatis-config.xml
    01淘淘商城项目:项目Maven工程搭建
    Connection timed out: connect; Communications link failure
    启动maven项目的配置
    PLSQL 触发器概念
    Git 概念&常用命令
    Git与svn的区别 & Git的工作流程
    Redis 是如何存储的
    Redis 概念,常用命令
    idea 快捷键
  • 原文地址:https://www.cnblogs.com/whitewolf/p/console-log-print.html
Copyright © 2011-2022 走看看