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. 常用处理字符串的SQL函数

    汇总函数:Count.Sum.AVG.MAX.min; 数学函数: ABS:绝对值.floor:给出比给定值小的最大整数. round(m,n):m为给定的值,n为小数点后保留的位数. power(m ...

  2. VBS 脚本调用

    https://my.oschina.net/Tsybius2014/blog/602641

  3. 一起talk C栗子吧(第九十 三回:C语言实例--进程间通信之临界资源)

    各位看官们.大家好,前面章回中咱们说的是使用信号和管道进行进程间通信的样例.这一回咱们说的样例是:进程间通信之临界资源.闲话休提,言归正转.让我们一起talk C栗子吧! 我们首先介绍一下,什么是临界 ...

  4. cocos2d-x认识之旅

    cocos2d-x 学习历程 1. 了解cocos2d-x.官网 : www.cocos2d-x.org 2. 搭建cocos2d-x. 使用版本号cocos2d-x 3.0 搭建好开发环境教程:ht ...

  5. IDEA配置svn地址方法及出现的问题的解决办法

    1.在IDEA中点击File-Settings里面,如图所示,选择你本地装的svn的exe路径: 2.在如图所示菜单中配置svn地址: 问题1:如果svn路径下没有exe文件,则是装svn的时候没有安 ...

  6. debian 9 安装后需做的几件事

    debian 9 安装后需做的几件事 安装环境:X86 >> Debian 9 Linux/GNU apt源更新 注意连上有线网络 刚安装好的debian系统中,/etc/apt/sour ...

  7. android问题及其解决-优化listView卡顿和怎样禁用ListView的fling

    问题解决-优化listView卡顿和怎样禁用ListView的fling 前戏非常长,转载请保留出处:http://blog.csdn.net/u012123160/article/details/4 ...

  8. Android SlideAndDragListView,一个可排序可滑动item的ListView

    SlideAndDragListView简介 SlideAndDragListView,可排序.可滑动item显示”菜单”的ListView. SlideAndDragListView(SDLV)继承 ...

  9. multi_input_paths

  10. 【Educational Codeforces Round 31 C】Bertown Subway

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后肯定会形成若干个环的. 把最大的两个环合在一起就好. 每个环贡献: 假设x=环的大小 ->x*x 注意int的溢出 [代码 ...