我们都知道Chrome浏览器在控制台可以通过console.log("Hello");输出调试信息。但是每次打印的内容是黑白的难免有些单调,今天偶然的发现某网站居然能够打印彩色调试信息。文字是彩色的,背景也是彩色的。于是查看了他的代码,原来实现起来挺简单的。

var a = "background: rgb(248, 177, 173); color: rgb(63, 172, 203)";
console.log("%c Jazz.Computer ", a),
console.log("%c 2015 ", a),
console.log("%c Yotam Mann ", a),
console.log("%c Sarah Rothberg ", a),

最终的效果是:

我也试了一下,成功啦!

Chrome控制台打印输出彩色调试信息的更多相关文章

  1. qt中如果用qDebug输出彩色调试信息

    Linux:  在终端输出彩色信息有点类似于html的语法,即在要输出的文字前加上转义字符. 指令格式如下\033[*m 这里的*就是转义字符,例如我们要输出一段绿色的文字 qDebug(" ...

  2. qt中如何用qDebug输出彩色调试信息

    原文 http://fanzhichao.blog.hexun.com/22330640_d.html 在终端输出彩色信息有点类似于html的语法,即在要输出的文字前加上转义字符. 指令格式如下\03 ...

  3. Chrome 控制台console的用法(学了之后对于调试js可是大大有用的哦)

    大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对co ...

  4. Chrome控制台 JS调试

    Chrome控制台 JS调试的一些小技巧 $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择 ...

  5. Chrome控制台毫无反应,打印不出信息了?

    最近在使用console.log()方法的时候遇到一个奇怪的问题,打开chrome控制台想调试代码,结果控制台半天无反应,让我纳闷了半天.详情如图所示: 然后我又打开了新的标签页,不行!接着干脆关闭浏 ...

  6. Chrome控制台 JS调试的一些小技巧

    $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择过的DOM节点.在页面右击选择审查元素,然 ...

  7. Chrome 控制台 如何调试javascript

    上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1 ...

  8. 【Chrome控制台】获取元素上绑定的事件信息以及监控事件

    需求场景 在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况. 解决方案 普通操作 之前面对这种情况,一般采取的措施就是在各个事件里写console.info, ...

  9. 手机网站调试神器之chrome控制台

    现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网.于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓.对于我们Web前端工程师来说,了解并掌握手机编程的 ...

随机推荐

  1. Python_06-函数与模块

    1.获取当前路径 >>> import os >>> os.path() >>> os.getcwd() 'D:\\Python34' os.pa ...

  2. Marshal.FreeHGlobal 方法 (IntPtr)

    释放以前从进程的非托管内存中分配的内存. 命名空间:   System.Runtime.InteropServices程序集:  mscorlib(位于 mscorlib.dll) 下面的示例演示如何 ...

  3. code1135 选择客栈

    首先,预处理三个数组. pre[x]表示在此之前颜色为x的客栈有多少个. f[x]表示在此之前的客栈中,某个点c,c的颜色为x,并且从c点到已经读入的点之间有费用小于p的客栈,这样的c点的个数 las ...

  4. TWO PHASES OF ANGULAR 2 APPLICATIONS

    Angular 2 separates updating the application model and reflecting the state of the model in the view ...

  5. 一起做RGB-D SLAM(8) (关于调试与补充内容)

    “一起做”系列完结后,我收到不少同学给我的反馈.他们提了一些在程序编译/运行过程中的问题.我把它们汇总起来,组成了这个“补充篇”.你也可以看成是一个Q&A. Q: OpenCV的版本?A: 我 ...

  6. idea中处理异常的快捷键

    alt+Enter

  7. [GO]go使用etcd

    package main import ( "go.etcd.io/etcd/clientv3" //笔者在使用clientv3的时间曾经使用过github.com/coreos/ ...

  8. shllter自动和手动实例

    加壳: wineconsole shellter A,选自动 将putty.exe移到/usr/share/shllter/目录,PE设置为putty.exe LHOST,LPORT 监视: use ...

  9. 看图说说JVM GC收集算法

  10. Websocket出现的错误

    前端使用sockjs,后台使用spring的websocket框架 结果在一个网络较慢的地方,发现tomcat报错信息: Oct 28, 2015 10:10:43 AM org.apache.cat ...