我们都知道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. xshell评估过期解决办法

    1.登录网景官网的下载页面: https://www.netsarang.com/download/down_form.html?code=522 2.直接在页面中有红色*号的地方输入个人信息,lic ...

  2. Python id() 函数

    Python id() 函数  Python 内置函数 描述 id() 函数用于获取对象的内存地址. 语法 id 语法: id([object]) 参数说明: object -- 对象. 返回值 返回 ...

  3. 手工kill掉VNC进程的故障处理

    1.模拟Kill掉已经启动的VNC服务 1)启动桌面1的服务 [root@testdb ~]# vncserver :1 New 'testdb:1 (root)' desktop is testdb ...

  4. Get The Client Info From PHP SERVER Arrary

    Get The Client Info From PHP SERVER Arrary <?php date_default_timezone_set( "Asiz/Shanghai&q ...

  5. FIX protocol tutorial : Fix Session is not connecting how to diagnose it ?

    In this blog post of FIX protocol tutorial series I would like to share my experience with connectiv ...

  6. loadrunner12--学习中遇到疑问及解释

    1.analysis里面,平均事务响应时间,平均事务响应时间+运行vuser,两个图的数据有区别是什么原因? 答: 请仔细查看以下两张图,其实两张图的数据是没有区别的. 之所以我们认为他们二者的数据有 ...

  7. Mac下Laravel的Homestead环境配置

    准备开始学PHP后端,在看完PHP语法以及PHP的MVC设计模式以后,准备开始学习PHP的主流框架Laravel,Laravel准备了一个万事俱备的虚拟环境Homestead,配置一下用起来. 安装v ...

  8. RocketMQ:Cannot allocate memory

    使用Storm本地模式消费RocketMQ数据的时候, 消费一点数据之后,就会出现如下错误: Java HotSpot(TM) 64-Bit Server VM warning: INFO: os:: ...

  9. 深入浅出NetWorking

    技术屌丝也是需要学习网络基本知识的,本书用一种轻松的方式讲了最基本的网络概念和硬件.协议,看完此书,就可以学习<TCP/IP协议>,学完后从此网络再无战事了. 1.网线分为:双绞线,同轴电 ...

  10. 基于Web Service的客户端框架搭建二:数据转换层(FCL)

    引言 要使用WebService来分离客户端与服务端,必定要使用约定好两者之间的数据契约.Json数据以其完全独立于语言的优势,成为开发者的首选.C# JavaScriptSerializer为Jso ...