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. 好用的 python 工具集合

    图标处理小程序, 妈妈再也不用担心我不会制作图标了 # PythonMargick包可以到Unofficial Windows Binaries for Python Extension Packag ...

  2. ERROR qos-server can not bind localhost:22222

    dubboe版本2.7.1 spring cloud alibaba最新官网examples 根据readme中说明文档依次启动 1.nacos,默认用户名密码nacos/nacos 2.启动spri ...

  3. SSD源码解读——网络测试

    之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...

  4. 白盒测试之JUnit与SpringTest的完美结合

    通过白盒的单元测试可以验证程序基本功能的有效性,从而保证整个系统的质量,功在一时,利在千秋.目前80%以上公司后台还是基于java,尤其是后台大量采用Spring框架,我们这里采用Junit和Spri ...

  5. 09Cookie&Session

    1.会话技术 1. 会话:一次会话中包含多次请求和响应.  一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止2. 功能:在一次会话的范围内的多次请求间,共享数据3. 方式: 1 ...

  6. 清北学堂dp图论营游记day1

    讲课人: 老师对dp的理解是类似于分治思想,由小状态推出大状态.不同的是分治算法没有重叠子问题. dp把子问题越划越小,从而推出了基础状态.然后是dp方程,要满足简洁性,并且充分描述能够影响最后结果的 ...

  7. k8spod控制器概述

    自主式pod对象由调度器绑定至目标工作节点后即由相应节点上的kubelet负责监控其容器的存活性,容器主进程崩溃后,kubelet能够自动重启相应的容器.不过,kubelet对非主进程崩溃类的容器错误 ...

  8. PLT hook笔记

    1. hook技术概述    hook技术是一种拦截用户函数调用的技术.通过hook技术可以实现统计用户对某些函数的调用次数,对函数注入新的功能的目标.在Linux平台,Hook技术可以分成用户和内核 ...

  9. web前端_css01

    CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中 <!DOCTYPE htm ...

  10. 将springboot jar应用打包成镜像并在docker运行成容器

    先看一下我的Dockerfile内容与服务器中的目录结构 上面 yibai-0.0.1-SNAPSHOT.jar 为springboot应用打成的jar包,Dockerfile为将应用打成镜像的配置文 ...