The Chrome console allows you to format messages using CSS properties. This lesson walks you through the syntax of formatting your logs with css then refactoring into a template tag function to make formatting more reusable.

const debug = (label, style, obj) => {
console.log(`%c${label}`, `${style}`, `${obj}`);
}; debug(
`debug: `,
`color: white; background-color: grey; padding: .5em;`,
JSON.stringify({name: 'Zhentian'}));

[Javascript] Format console.log with CSS and String Template Tags的更多相关文章

  1. [Javascript] Advanced Console Log Arguments

    Get more mileage from your console output by going beyond mere string logging - log entire introspec ...

  2. Javascript的console.log()用法

    Firebug & Chrome Console 控制台的一些其他功能console.log(object[, object, ...])使用频率最高的一条语句:向控制台输出一条消息.支持 C ...

  3. (转)Javascript中console.log()用法

    原文地址应该是这个吧:http://my.oschina.net/junn/blog/142728 注意:必须要提前打开IE的开发者模式才能看到输入 否则就会报错. IE下可以这个判断: if (co ...

  4. javascript的console.log用法

    f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...

  5. javascript:console.log()是什么js库里的?

    这个不是什么库的,这个是浏览器的函数,如果你使用firefox并且装有firebug插件,当使用console.log(……)时,会把括号内的字符串输出到控制台,当然,在IE中这个是没有的,要报错.相 ...

  6. javascript篇-console.log()打印object却显示为字符串[object object]

    console.log打印对象遇到的一个问题,如下截图 打印结果与预期不符,原因是因为字符串‘a’和对象object拼接在一起,拼成了一个字符串

  7. Javascript 将 console.log 日志打印到 html 页面中

    如何将 console.log() 打印的日志输出到 html 页面中 (function () { var old = console.log; var logger = document.getE ...

  8. 七、JavaScript之console.log输出和document.write输出

    一.代码如下 二.运行效果如下 三.点击之后,效果如下 四.按一下F12,在控制台中可以看到

  9. console.log()显示图片以及为文字加样式

    有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.lo ...

随机推荐

  1. map(froeach改变值,map生成新数组)

    http://www.365mini.com/page/jquery-map.htm <input id="n1" name="uid" type=&qu ...

  2. php基础篇之一

    1.PHP是什么 官方文档:超文本预处理器 2.PHP能够做一些什么? PHP主要应用在一下领域: (1)服务器端脚本,需要:PHP解析器,PHP服务器,PHP浏览器. (2)命令行脚本,只需要PHP ...

  3. 关于搭建Session服务器(转载)

    Session服务器配置指南与使用经验 一.摘要 所有Web程序都会使用Session保存数据. 使用独立的Session服务器可以解决负载均衡场景中的Session共享问题.本文介绍.NET平台下建 ...

  4. 不重新启动VMWare虚拟机加入虚拟磁盘的方法(上)

    近期因为业务须要在不重新启动系统的前提下对系统进行扩容,前提是该系统做过lvm.可是没有足够的物理卷(硬盘),所以引出了改文.本文共分为上下两部分.这是第一部分. 文件夹 加入磁盘 做LVM 加入硬盘 ...

  5. USB串行端口

    USB-SERIAL CH341A(COM22)USB串行端口

  6. 【习题 6-11 UVA - 10410】Tree Reconstruction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以先确定当前这棵子树的dfs序的范围. 然后第一个元素肯定是这棵子树的根节点. 那么只要在这棵子树的范围里面枚举节点. 看看有没有 ...

  7. 【习题 6-6 UVA - 12166 】Equilibrium Mobile

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举一个秤砣的重量不变. 某一个秤砣的重量不变之后. 所有秤砣的重量就固定了. 因为它的兄弟节点的重量要和它一样. 则父亲节点的重量 ...

  8. C# SocketAsyncEventArgs类

    Namespace:System.Net.Sockets Assemblies:System.Net.Sockets.dll, System.dll, netstandard.dll (Represe ...

  9. 学习redis--安装(二)

    安装前准备,我是在虚拟机中安装centos,然后安装redis. 安装 1.安装VMware,并安转centos系统 2.将redis的压缩包,上传到linux系统中(将下载到pc中的文件,拖到cen ...

  10. simple-word-Highlighter 支持网址正则表达式匹配