1.常用console类型

console.log() 常规打印 

console.warn() 打印警告信息 

console.error() 打印错误信息 

console.time() 和 console.timeEnd() 

注:打印两次函数的时间间隔,两者需配合使用,括号内是计时器的名字,二者需对应,此方法可用来 测试性能 等

console.time("Array initialize");
var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
}
console.timeEnd("Array initialize");

2.自定义console样式
格式如下:

console.log("%c需要输出的信息", "css 代码"); 

栗子:

console.log("%cstyle Test","color:#0a0;font-size:5em")

3.打印变量

ps:此处$c后的内容必须是字符串,想打印变量可参考如下写法:

4.打印图片

打印图片的原理也用到了css,在css样式中定义背景图,如:

console.log("%c", "padding:20px 60px;background:url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png') no-repeat;");

5.关闭生产环境的console
最精简的方法:在入口js处增加一行代码console.log=()=>{},其他warn,error等以此类推,开发时注释掉这行代码即可,在生产环境时再将注释取消

6.文字渐变打印

console.log("%c" + Mar,"background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(444, 94, 170)), to(rgb(122, 152, 216)));-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size:20px;")

自定义Chrome的console(样式、打印图片、开关)的更多相关文章

  1. css Cursor:url()自定义鼠标指针样式为图片

    css自定义鼠标指针样式为图片Cursor:url()的使用,今天在项目中,要用到自定义鼠标样式,格式: css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoo ...

  2. console.log添加样式及图片

    console.log在控制台打出css样式的文字及图片 谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档 Format Specifier %s Formats the val ...

  3. 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

  4. arcgis api for js共享干货系列之二自定义Navigation控件样式风格

    arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...

  5. js console.log 打印 对像 数组 详解

    console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个 ...

  6. WPF界面设计技巧(2)—自定义漂亮的按钮样式

    原文:WPF界面设计技巧(2)-自定义漂亮的按钮样式 上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Des ...

  7. 自定义checkbox, radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

  8. arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格(附源码下载)

    0.内容概览 自定义 Navigation 控件样式风格 源码下载 1.内容讲解 arcgis api 3.x for js 默认的Navigation控件样式风格如下图:这样的风格不能说不好,各有各 ...

  9. 两次console.log打印值不同

    var a=[1,2,3] console.log(a); a[2]=10; console.log(a); // 打印结果 // (3) [1, 2, 3] // (3) [1, 2, 10] // ...

随机推荐

  1. dubbo学习笔记一(服务注册)

    相关的资料 官方文档 官方博客 项目结构 项目说明 [lesson1-config-api] 是一个接口工程,编译后是jar包,被其他工程依赖 [lesson1-config-2-properties ...

  2. Nginx如何配置反向代理

    server { listen 80; server_name 代理域名; location / { proxy_pass 应用域名:应用端口; proxy_set_header Host $host ...

  3. UITableViewCell背景色.选中背景色,分割线,字体颜色设置

    1.系统默认的颜色设置 //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...

  4. Go语法的基本使用(三)

    // 长度 vs 容量. // 长度是目前里面有几个值 // 容量是最多能放多少个值 func main(){ var a =make(chan int,4) a<-1 a<-2 a< ...

  5. Linux部署java和tomcat的运行环境

    Linux部署java和tomcat的运行环境 1.上传下载的jdk的rpm包和tomcat的tar包,我是放到/opt目录了,文件直接去官网下载即可. 2.如果之前安装过其他版本的jdk,最好先现在 ...

  6. A Neural Probabilistic Language Model (2003)论文要点

    论文链接:http://www.jmlr.org/papers/volume3/bengio03a/bengio03a.pdf 解决n-gram语言模型(比如tri-gram以上)的组合爆炸问题,引入 ...

  7. 什么是Redis缓存穿透、缓存雪崩和缓存击穿

    https://baijiahao.baidu.com/s?id=1619572269435584821&wfr=spider&for=pc 缓存穿透 缓存穿透,是指查询一个数据库一定 ...

  8. 多线程(二)Object类方法、线程的操作sleep(),join(),interrupt(),yield()

    四.Object类简介 Object类是所有类的超类,之所以放在线程部分是因为其方法很多是和线程有关的.比如以下三个: wait()方法.wait(long timeout)和wait(long ti ...

  9. 【洛谷P2147】洞穴勘测

    题目大意:维护 N 个点的无向图,支持动态加边和删边,回答两点的连通性. 题解:线段树分治 + 可撤销并查集 询问可以离线,这是线段树分治的基础. 建立在操作时间轴上的线段树称为线段树分治算法. 本题 ...

  10. fedora29 安装mongodb 4.0,6问题记录

    如果运行mongod命令时提示 无加载共享库libcrypto.so.10,那就到页面下载http://www.rpmfind.net/linux/rpm2html/search.php?query= ...