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. eclipse创建maven

    第一步: 第二步 第三步: 第四步: 第五步: 第六步: <?xml version="1.0" encoding="UTF-8"?> <we ...

  2. VB 宏+mysql解决EXCEL表格实现自动化处理

    1.表格模板自动建立源码 Sub opp()Dim myPath$, myFile$, AK As WorkbookApplication.ScreenUpdating = FalsemyPath = ...

  3. CISP/CISA 每日一题 18

    CISSP 每日一题(答)What is the purpose of an access review and audit? Checkto ensure that users do not hav ...

  4. 使用JOTM实现分布式事务管理(多数据源)

    使用spring和hibernate可以很方便的实现一个数据源的事务管理,但是如果需要同时对多个数据源进行事务控制,并且不想使用重量级容器提供的机制的话,可以使用JOTM达到目的. JOTM的配置十分 ...

  5. 数学定理证明机械化的中国学派(II)

    所谓"学派"是指:存在一帮人,具有同样或接近的学术观点或学术立场,採用某种特定的"方法"(或途径),在一个学术方向上共同开展工作.而且做出了相当有迎影响的学术成 ...

  6. 含有过滤功能的android流式布局

    FilterFlowLayout 含有过滤功能的流式布局, 參考FlowLayout 能够去除宽度不在范围(比例或真实值)内的子view 能够设置最大行数 能够加入组件间水平间距 能够加入行间距 系统 ...

  7. CentOS6 安装中文包和变更系统默认语言

    CentOS6 安装中文包和变更系统默认语言   用 yum 安装语言包的命令是 yum groupinstall <language>-support    ,其中 <langua ...

  8. 关于python中数组的问题,序列格式转换

    https://blog.csdn.net/sinat_34474705/article/details/74458605?utm_source=blogxgwz1 https://www.cnblo ...

  9. ClickOnce

    Clic WPF ClickOnce应用程序IIS部署发布攻略   WPF程序非常适合公司内网使用,唯一缺点就是客户端要安装.net框架4.0.优势也很明显,在客户端运行的是一个WinForm程序,自 ...

  10. iOS8: 企业开发的终结?

    iOS 8 的公布(如今是 iOS8.1),并非对全部人来说都是值得高兴的事情. 对那些使用企业部署(不经过商店公布)的 app 开发人员来说,又被苹果坑到了. 由于 iOS 8 的一个Bug.导致企 ...