自定义Chrome的console(样式、打印图片、开关)

本文介绍了如何自定义Chrome浏览器的console,包括使用不同类型的console.log()、console.warn()和console.error()进行常规、警告和错误信息的打印,以及利用console.time()和console.timeEnd()来测试函数性能。此外,还探讨了如何设置自定义样式,如打印图片,并讲解了在生产环境中关闭console的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录:

常用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");

这里写图片描述

自定义console样式

格式如下:
console.log("%c需要输出的信息", "css 代码");
栗子:
console.log("%cstyle Test","color:#0a0;font-size:5em")
这里写图片描述

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

这里写图片描述
具体的封装方法我就不写了,大家自己实践吧~!

打印图片

打印图片的原理也用到了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;");

这里写图片描述
理论上这里也是可以封装的,感兴趣有需要的同学自己去尝试吧~!

关闭生产环境的console

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值