我们都知道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. Visual Studio 2017 无法打开包括文件: “QOpenGLWidget”: No such file or directory

    编译项目时,发现报错:VS 无法打开包括文件: “QOpenGLWidget”: No such file or directory,在Qt对应的目录(E:\Qt\Qt5.12.2\5.12.2\ms ...

  2. Java程序设计9——泛型

    泛型是对集合的补充,JDK1.5增加泛型支持很大程度上都是为了让集合能记住其元素的数据类型.在没有泛型之前,一旦把一个对象丢进Java集合中,集合就会忘记对象的类型,把所有的对象都当成Object类型 ...

  3. unidac 访问sql server 字符查询参数失效问题及解决办法

    在帮朋友调试kbmmw 服务器的时候,发现用uindac 访问sql server作为后台时,碰见一个问题. 具体如下: cx.Close; cx.sql.add('select * from T w ...

  4. appium镜像设置

    npm --registry http://registry.cnpmjs.org install -g appium 使用npm的国内镜像可以安装,速度很不错. 以后不想输入ip的话可以输入以下命令 ...

  5. python使用git进行版本控制1

    首先,选择一个合适的地方,创建一个空目录: $ mkdir learngit $ cd learngit $ pwd /Users/michael/learngit pwd命令用于显示当前目录. 如果 ...

  6. Centos 7 搭建wordpress

    1.安装mysql 详情见:http://www.cnblogs.com/jw35/p/6044170.html 2.关闭firewalld与selinux systemctl stop firewa ...

  7. 简述负载均衡和CDN技术

    曾经见到知乎上有人问“为什么像facebook这类的网站需要上千个工程师维护?”,下面的回答多种多样,但总结起来就是:一个高性能的web系统需要从无数个角度去考虑他,大到服务器的布局,小到软件中某个文 ...

  8. FIREDAC的TFDJSONDataSets和TFDJSONDeltas查询和提交数据

    服务端代码: uses Data.FireDACJSONReflect, FireDAC.Stan.Storage, FireDAC.Stan.StorageBin, FireDAC.Stan.Sto ...

  9. 更改SQL Server中默认备份文件夹

    当你安装SQL Server时,安装路径一般如下:C:\Program Files\Microsoft SQL Server\MSSQL.2\MSSQL.在这个目录下也有数据文件的文件夹和备份文件的文 ...

  10. Gluster 常用命令

    Gluster 常用命令1 服务器节点# gluster peer status //查看所有节点信息,显示时不包括本节点 # gluster peer probe NODE-NAME //添加节点 ...