console.log()用法,相信大家都很熟悉了,这里就不再啰嗦。

下面来玩几个新鲜点的,我用的是chrome28,不保证兼容其他浏览器:
console.log的第一个参数中可以指定一个格式字符,这样第二个参数就可以定义替换文本或其他内容。
%c表示定义一个用于显示参数内容的css样式
%s表示定义替换文本

1. 给输出到控制台的内容定义颜色、字体等
console.log(‘%cHello World’, ‘color: #00c’)
console.log(‘%cHello %cWorld’, ‘color: #00c’, ‘color:#0c0;font-size:18px;’)
参数中的占位符可定义多个,如参数个数不够时,会将占位符原样输出,如:
console.log(‘%cHello %cWord’, ‘color:#0f0′)

2. 让输出的内容别靠左边那么近
console.log(‘%cHello World’, ‘color: #c00; margin-left:20px’)

3. 输出一个警告的小icon
console.warn(‘%cHello World’, ‘color: #c00; margin-left:20px’)

4. 输出背影图片
console.log(‘%cB’,'background:url(“http://cdn.iknow.bdimg.com/static/common/pkg/module_z2d468dd4.png”) -140px 0;padding:22px 67px;line-height:44px;font-size:0;’);

补充一下,group也挺好用,试试这个:
console.group('Group by');console.log('Test 1');console.log('Test 2');console.groupEnd();

或者这样:
console.groupCollapsed('Group by');console.log('Test 1');console.log('Test 2');console.groupEnd()

前一个是默认展开的,后一个是默认收起了。

console 高级用法的更多相关文章

  1. [转] console.log的高级用法

    //基本用法 console.log('最常见用法\n换行'); console.error('输出错误信息 会以红色显示'); console.warn('打印警告信息 会以黄色显示'); cons ...

  2. console.log的高级用法

    //基本用法 console.log('最常见用法\n换行'); console.error('输出错误信息 会以红色显示'); console.warn('打印警告信息 会以黄色显示'); cons ...

  3. SolrNet高级用法(分页、Facet查询、任意分组)

    前言 如果你在系统中用到了Solr的话,那么肯定会碰到从Solr中反推数据的需求,基于数据库数据生产索引后,那么Solr索引的数据相对准确,在电商需求中经常会碰到菜单.导航分类(比如电脑.PC的话会有 ...

  4. Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)

    上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...

  5. 再谈Newtonsoft.Json高级用法

    上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...

  6. Newtonsoft.Json高级用法(转)

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  7. 【转】 Newtonsoft.Json高级用法

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  8. Newtonsoft.Json高级用法 1.忽略某些属性 2.默认值的处理 3.空值的处理 4.支持非公共成员 5.日期处理 6.自定义序列化的字段名称

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  9. 细说 ASP.NET Cache 及其高级用法【转】

    阅读目录 开始 Cache的基本用途 Cache的定义 Cache常见用法 Cache类的特点 缓存项的过期时间 缓存项的依赖关系 - 依赖其它缓存项 缓存项的依赖关系 - 文件依赖 缓存项的移除优先 ...

随机推荐

  1. Android消息提示框Toast

    Android消息提示框Toast Toast是Android中一种简易的消息提示框.和Dialog不一样的是,Toast是没有焦点的,toast提示框不能被用户点击,而且Toast显示的时间有限,t ...

  2. MySQL架构优化:定时计划任务与表分区

    转自: MySQL架构优化实战系列3:定时计划任务与表分区 - 今日头条(TouTiao.com)http://toutiao.com/a6304736482361049345/?tt_from=mo ...

  3. 条形图(diagrams)

    条形图(diagrams) 题目描述 小 虎刚上了幼儿园,老师让他做一个家庭作业:首先画3行格子,第一行有3个格子,第二行有2个格子,第三行有3个格子.每行的格子从左到右可以放棋子,但要 求除第一行外 ...

  4. 重点block

    //  main.m //  block探索 // //  Created by 殷婷婷 on 15-6-6. //  Copyright (c) 2015年 lanou. All rights re ...

  5. photo中的图文混排

    photoshop中无法象word中自动图文混排,但可以通过手工绘制路径完成图文混排. 如下图,先摆放图像,然后绘制路径,然后在路径中输入或粘贴文字即可.

  6. Linux:crontab的安装以及使用方法

    安装crontab: [root@wulaoer ~]# yum install vixie-cron [root@wulaoer ~]# yum install crontabs 说明:vixie- ...

  7. 关于JVM内存模型的一些总结

    首先上图,了解一下大概结构 1.程序计数器 程序计数器(Program Counter)是一块较小的内存空间,它的作用可以看做是当前线程所执行的字节码的行号指示器.在虚拟机的概念模型里,字节码解释器工 ...

  8. Bootstrap-dialog的使用(续Bootstrap Table)

    Bootstrap-dialog实现表格内容的增,删,改. 插件引入:必须先引入jquery和bootstrap和artTemplate. <link rel="stylesheet& ...

  9. h2database. 官方文档

    http://www.h2database.com/html/advanced.html http://www.h2database.com/html/tutorial.html#csv http:/ ...

  10. Alcatraz:插件管理

    安装: 终端粘贴 "curl -fsSL https://raw.github.com/alcatraz/Alcatraz/master/Scripts/install.sh | sh&qu ...