我们都知道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. IP地址工具类

    /// <summary> /// 获取客户端IP地址 /// </summary> /// <returns></returns> public st ...

  2. JetBrains全家桶激活地址

    全家桶地址:https://www.jetbrains.com/products.html?fromMenu JetBrains 授权服务器(License Server URL):http://id ...

  3. AI ML DL

    在经历了蛮荒的PC互联网时代,混战的移动互联网时代,到现今最火的人工智能时代. 大数据.云计算.机器学习的技术应用,已经使得IT从业者的门槛越来越高. 套用一句樊登读书会的宣传口号“keep lear ...

  4. Python 关于数组矩阵变换函数numpy.nonzero(),numpy.multiply()用法

    1.numpy.nonzero(condition),返回参数condition(为数组或者矩阵)中非0元素的索引所形成的ndarray数组,同时也可以返回condition中布尔值为True的值索引 ...

  5. 在sublime text中添加JavaScript的build-system

    -step 1: 下载安装node.js, 并添加到path变量中. -step 2: 在sublime text中新建一个build-system. tools --> build-syste ...

  6. 8-5 Navicat工具与pymysql模块

    一 Navicat 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作MySQL数据库 需要掌握的基本操作 ...

  7. 23 DesignPatterns学习笔记:C++语言实现 --- 1.1 Factory

    23 DesignPatterns学习笔记:C++语言实现 --- 1.1 Factory 2016-07-18 13:03:43 模式理解

  8. CGLIB实现动态代理

    JDK动态代理和CGLIB字节码生成的区别? * JDK动态代理只能对实现了接口的类生成代理,而不能针对类 * CGLIB是针对类实现代理,主要是对指定的类生成一个子类,覆盖其中的方法   因为是继承 ...

  9. Buffer Pool--SQL Server:Memory Manager 对象

    --=================================================================SELECT * FROM sys.sysperfinfoWHER ...

  10. 谁说他们版本不兼容——hadoop1.2.1+hbase0.94.11+nutch2.2.1+el

    一.背景 最近由于项目和论文的需要,需要搭建一个垂直搜索的环境,查阅了很多资料,决定使用Apache的一套解决方案hadoop+hbase+nutch+es.这几样神器的作用就不多作介绍了,自行参考各 ...