[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 ...
随机推荐
- 利用 istio 来对运行在 Kubernetes 上的微服务进行管理
尝试在一个准生产环境下,利用 istio 来对运行在 Kubernetes 上的微服务进行管理. 这一篇是第一篇,将一些主要的坑和环境准备工作. 内容较多,因此无法写成手把手教程,希望读者有一定 Ku ...
- C++ 中的异或操作^
好好的利用异或能够产生奇妙的效果. 异或运算的性质: 不论什么一个数字异或它自己都等于0.也就是说.假设我们从头到尾依次异或数组中的每个数字,那么终于的结果刚好是那个仅仅出现一次的数字.由于那些出现两 ...
- JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div
function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...
- Day2:数据类型
一.数字 1.整型(int),无长整型.python3.x,不论多大的数都是int #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuh ...
- 使用stringstream进行类型转换与字符串分割
C++标准库中的<sstream>提供了比ANSI C的<stdio.h>更高级的一些功能,即单纯性.类型安全和可扩展性. 如果你已习惯了<stdio.h>风格的转 ...
- 最全Pycharm教程(42)——Pycharm扩展功能之Emacs外部编辑器
1.主题 介绍怎样将Emacs定义为一个Pycharm外部编辑器. 2.准备工作 (1)Pycharm版本号为2.7或更高 (2)下载了downloadedEmacs并正确安装 3.配置Emacs 打 ...
- Apache的.htaccess项目根文件夹伪静态设置规则
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- AE要素选择(点选和拉框选择)
原文 AE要素选择(点选和拉框选择) 选择一个要素或者一个要素集(FeatureSelection)的方法很多,如IMap::SelectByShape.ILayer::search.IFeature ...
- 使用DNSCrypt解决Dropbox污染问题
作者:半点闲 时间:2014-6-27 18:27 博客:blog.csdn.net/cg_i 邮箱:b_dx@sohu.com 背景知识:防火长城(GFW) keyword:DNSCrypt ...
- 一位90后程序员的自述:如何从年薪3w到30w!
初入职场之时,大多数人都应该考虑过这样的一个问题,如何找到一种实用,简化web流程的方法,在工作之中能有所提升和突破. 学好哪些?基础必须精通! 九层之塔,起于垒土;千里之行,始于足下.入门之前,这些 ...