[Javascript] Format console.log with CSS and String Template Tags
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的更多相关文章
- [Javascript] Advanced Console Log Arguments
Get more mileage from your console output by going beyond mere string logging - log entire introspec ...
- Javascript的console.log()用法
Firebug & Chrome Console 控制台的一些其他功能console.log(object[, object, ...])使用频率最高的一条语句:向控制台输出一条消息.支持 C ...
- (转)Javascript中console.log()用法
原文地址应该是这个吧:http://my.oschina.net/junn/blog/142728 注意:必须要提前打开IE的开发者模式才能看到输入 否则就会报错. IE下可以这个判断: if (co ...
- javascript的console.log用法
f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...
- javascript:console.log()是什么js库里的?
这个不是什么库的,这个是浏览器的函数,如果你使用firefox并且装有firebug插件,当使用console.log(……)时,会把括号内的字符串输出到控制台,当然,在IE中这个是没有的,要报错.相 ...
- javascript篇-console.log()打印object却显示为字符串[object object]
console.log打印对象遇到的一个问题,如下截图 打印结果与预期不符,原因是因为字符串‘a’和对象object拼接在一起,拼成了一个字符串
- Javascript 将 console.log 日志打印到 html 页面中
如何将 console.log() 打印的日志输出到 html 页面中 (function () { var old = console.log; var logger = document.getE ...
- 七、JavaScript之console.log输出和document.write输出
一.代码如下 二.运行效果如下 三.点击之后,效果如下 四.按一下F12,在控制台中可以看到
- console.log()显示图片以及为文字加样式
有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.lo ...
随机推荐
- vue的mode: 'history'模式
const router = new VueRouter({ mode: 'history', routes: [...] }) 不用mode: 'history'的时候,页面url地址后面会加上一个 ...
- bzoj3307雨天的尾巴(权值线段树合并/DSU on tree)
题目大意: 一颗树,想要在树链上添加同一物品,问最后每个点上哪个物品最多. 解题思路: 1.线段树合并 假如说物品数量少到可以暴力添加,且树点极少,我们怎么做. 首先在一个树节点上标记出哪些物品有多少 ...
- SQL分页的几种方式
1.使用Row_number() over(order by columnName)函数来作为标示分页(下面的例子都是以last_seen来排序的,要求取顺序为20-30行的数据) SELECT Us ...
- <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /> <LINK href="Xubuntu.ico" rel="shortcut icon"> <link href="Xubuntu.ico" rel="B
<link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /& ...
- vector转数组
vector转数组 由于vector内部的数据是存放在连续的存储空间,vector转数组事实上只需要获取vector中第一个数据的地址和数据的长度即可.如果仅仅是传参,无需任何操作,直接传地址即可,如 ...
- Apache httpd.conf 配置文件语法验证
Apache 的 httpd.conf文件改动之后,必须重新启动server才干生效. 有时server在提供服务的时候,直接更改配置,重新启动服务.会带来非常大的危急性. 假设能在改动配置之后,先验 ...
- wechat4j框架具体解释
发送消息: 基于上面access_token的逻辑,在构造发送消息对象的时候请依照例如以下代码. wechat4j和微信强力推荐的方法 CustomerMsg customerMsg = new Cu ...
- 1.3 Quick Start中 Step 2: Start the server官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 2: Start the server Step : 启动服务 Kafka ...
- Linux中top命令参数详解
此文摘自(https://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316399.html) 简介 top命令是Linux下常用的性能分析工具,能够实 ...
- LED恒流设计