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. sass自定义滚动条样式

    @mixin scrollBarStyle() { &::-webkit-scrollbar { width: 7px; height: 7px; } &::-webkit-scrol ...

  2. 趣闻|Python之禅(The Zen of Python)

    在Python解释器中输入“import this”会发生什么?如果你不知道这个彩蛋,推荐继续阅读这篇文章. 2001年秋,Foretec(一家会议组织公司)正在准备召开第十届Internationa ...

  3. 将二级目录下的文件合并成一个文件的Python小脚本

    这个小程序的目的是将二级目录下的文件全部合并成一个文件(其实几级目录都可以,只要做少许改动) #coding:utf8 import sys, os def process(path): new_fi ...

  4. 优秀Java程序员必备10招

    1. 拥有扎实的基础和深刻理解 OO 原则 对于 Java 程序员,深刻理解 ObjectOriented Programming(面向对象编程)这一概念是必须的.没有 OOPS 的坚实基础,就领会不 ...

  5. RMAN DUPLICATE ADG DEMO

    RMAN DUPLICATE ADG DEMO 生产环境谨慎使用,建议生产环境采用RMAN备份恢复的方式. 本演示案例所用环境:   primary standby OS Hostname pry s ...

  6. JSON序列化和解析

    1.JSON.stringfy()用于将 JavaScript 值转换为 JSON 字符串 2.JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象. 3.JSON. ...

  7. CSDN博客的文章分类和战略规划

    CSDN原创文章已经有300多篇了,现在已经整理了好多个分类目录了. 今天,特别向大家介绍下,每个分类的含义和规划. CSDN博客是我的一个重要的自媒体,也是我的一个战略实践. 我会精心维护这个博客, ...

  8. 推荐一款优雅高效的免费在线APP原型工具

    有段时间没有推荐干货给大伙了,今天是时候把压箱底的东西拿出来分享给大家了! 想要学习原型图绘制的小伙伴可以看过来,适合零基础的小白,五分钟就可以上手,绘制自己想要的产品原型图. 官方介绍:用户只需输入 ...

  9. Dynamic device virtualization

    A system and method for providing dynamic device virtualization is herein disclosed. According to on ...

  10. [Angular] Setup automated deployment with Angular, Travis and Firebase

    Automate all the things!! Automation is crucial for increasing the quality and productivity. In this ...