自定义Chrome的console(样式、打印图片、开关)
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(样式、打印图片、开关)的更多相关文章
- css Cursor:url()自定义鼠标指针样式为图片
css自定义鼠标指针样式为图片Cursor:url()的使用,今天在项目中,要用到自定义鼠标样式,格式: css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoo ...
- console.log添加样式及图片
console.log在控制台打出css样式的文字及图片 谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档 Format Specifier %s Formats the val ...
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...
- arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
- js console.log 打印 对像 数组 详解
console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个 ...
- WPF界面设计技巧(2)—自定义漂亮的按钮样式
原文:WPF界面设计技巧(2)-自定义漂亮的按钮样式 上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Des ...
- 自定义checkbox, radio样式
17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...
- arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格(附源码下载)
0.内容概览 自定义 Navigation 控件样式风格 源码下载 1.内容讲解 arcgis api 3.x for js 默认的Navigation控件样式风格如下图:这样的风格不能说不好,各有各 ...
- 两次console.log打印值不同
var a=[1,2,3] console.log(a); a[2]=10; console.log(a); // 打印结果 // (3) [1, 2, 3] // (3) [1, 2, 10] // ...
随机推荐
- arcgis 地图如何转到supermap平台
场景:客户使用arcmap配置好的地图数据,由于项目需要转换到超图平台.有如下几种思路供参考. 1. 使用arcmap生成地图缓存,supermap-iServer支持发布arcgis的地图缓存以及t ...
- OpenSSL(1)密钥和证书管理
OpenSSL是一个开源项目,包括密码库和SSL/TLS工具集. 从项目的官方站点可以看到: OpenSSL项目是安全套接字层( secure sockets layer, SSL)和传输层安全( t ...
- java中的compareto方法的详细介绍
java中的compareto方法的详细介绍 Java Comparator接口实例讲解(抽象方法.常用静态/默认方法) 一.java中的compareto方法 1.返回参与比较的前后两个字符串的as ...
- Storm项目开发纪要
1.POM引用storm-core和javax.servlet-api这两个组件,如果本地模式跑拓扑,要把<scope>provided</scope>去掉:如果远程发布运行, ...
- 06-spring框架—— Spring 与Web
在 Web 项目中使用 Spring 框架,首先要解决在 web 层(这里指 Servlet)中获取到 Spring容器的问题.只要在 web 层获取到了 Spring 容器,便可从容器中获取到 Se ...
- Idea 汉化后定位和系统设置打不开到问题
百度网盘:此汉化包已经修正过,拿来直接可以用 链接:https://pan.baidu.com/s/1wm3NbYSM9Gtsdu2EHQPMIA 密码:qdr3 1.系统设置(setting)外观选 ...
- kotlin函数式编程入门及图片处理
函数式编程入门: 对于面向对象编程[OOP]和函数式编程[FP] 由于在JAVA8的学习中系统的学习过了,所以这里对其概念就不过多解释了,下面直接用代码来看下在kotlin中函数式编程是如何编写的: ...
- volatile关键字解决线程间内存共享变量同步的问题,让变量可以立即同步。
- Gym - 101987G Secret Code (概率+数学积分)
题意:有A,B,C三个人要见面,每个人在[0,S]随机选择一个时间点作为见面时间,先到的那个人要等下一个人来了之后和他确认信息,然后马上就走. 例如,假如A先到,B其次,C最后到,那么A要等B到了之后 ...
- beautifulsoup4 用法一二
声明一个beautifulsoup4对象 bs = ( url,//路由 html_parser,//解析html代码 encoding//编码)//另一种请求解析方法 import requests ...