用 console 画条龙?
关注上方“前端开发博客”,选择“设为星标”
回复“2”加入前端群
相识
console
一定是各位前端er最熟悉的小伙伴了,无论是console
控制台,还是console
对象,做前端做久了,打开一个网页总是莫名自然的顺手打开控制台,有些调皮的网站还会故意在控制台输出一些有意思的东西,比如招聘信息,像百度的:其他的不说,真的每年都更新,看着还挺让人热血沸腾。另外输出一些花里胡哨的字符图形也是很常见的,比如天猫的:也有一些网站可能不喜欢被人调试,只要打开控制台就自动进入调试模式,还是无限debugger
的那种,最简单的实现方式如下:
setInterval(() =>{debugger
}, 1000)
破解也不难,有兴趣的可以百度一下。不知道是否有人像我一样,做前端很多年,就靠一个console.log
走天下,仿佛console
就一个log
方法,如果是,那么本文就来一起进一步认识一下console
对象吧。
相知
console
对象是由宿主环境提供的,如浏览器和nodejs
,作为全局对象的一个属性,不需要通过构造函数创建,直接使用即可,console
对象的__proto__
指向的是一个空对象,所以 console
对象的方法都挂在对象自身,在 chrome
控制台打印console
可以看有如下方法或属性:console
输出信息的方法都可以接收多个以逗号分隔的参数,打印的时候会在同一行进行显示,不会换行,想要换行的话请使用console
方法打印多次。另外在不同的浏览器上同一个方法可能会有差异,鉴于大家基本都是使用chrome
,所以以下内容大部分都是在chrome
下的效果。直接罗列api
说实话挺无聊的,所以我们按场景来看。
场景1:输出普通的调试信息,如数字、字符串、对象、数组、函数等
可以使用console.log
或console.info
,这两个方法基本是一样的:
场景2:想输出不同等级的调试信息,如警告信息或报错信息
调试级别的信息可以使用console.debug
方法,控制台默认是不显示的,想要看到的话需要勾上控制台对应的选项:警告信息可以使用console.warn
方法,会将这行信息添加黄色的背景以及一个感叹号图标,同时会显示堆栈信息:错误信息可以使用console.error
方法,会将这行信息添加红色的背景以及一个叉号图标,同时会显示堆栈信息:
场景3:想查看某个DOM
元素的所有属性
比如说我想看body
元素的所有属性要怎么看呢:
console.log(document.body)
这样在控制台打印出的是dom
结构,看不到具体是属性:那怎么办呢,可以使用for in
来遍历:
for(let p in document.body) {console.log(p, document.body[p])
}
还有一个简单的方法是把它作为数组的一项或者是对象的一个属性值:
console.log([document.body], {body:document.body})
当然,以上都不是最简单的,最简单的是直接使用console.dir
方法:
场景4:想查看具体的调用位置、调用堆栈等信息
只需要找到调用位置的话,log
、info
、error
等方法都可以,如果还想查看调用堆栈信息的话可以使用console.assert
、console.error
、console.warn
以及专门的方法console.trace
,trace
方法可以不带参数:
场景5:有时候console
写多了,打印出太多信息,无法一眼看出都是哪里的,也不容易分清楚哪些是相关联的
这个可以手动把其他的都给注释掉,只留你本次需要的(这要你说?),当然如果你愿意多敲几行代码的话,也可以使用console.group
方法来进行分组显示,使用console.groupEnd
方法结束分组,可以多级嵌套:
console.group(xxx)
xxx
console.groupEnd()
相恋
场景1:实现一下上述百度的效果
console
要输出换行的字符需要使用\n
:
console.log('每一个星球都有一个驱动核心,\n每一种思想都有影响力的种子。\n感受世界的温度,\n年轻的你也能成为改变世界的动力,\n百度珍惜你所有的潜力。\n你的潜力,是改变世界的动力!')
输出红色的字可以使用占位符,占位符格式为:console.log('%x其他字符', 'xxx', [xxx, xxx...])
设置样式使用%c
占位符,可以使用多个,为占位符后面的字符应用样式,替换完占位符还剩下的参数也会正常打印出来:
console.log('%c百度2021校园招聘简历投递:', 'color:red', 'https://talent.baidu.com/external/baidu/campus.html')
支持常用的样式属性:
console.log('%c街%c角%c小%c林', 'font-size: 20px;margin-right: 5px', 'color: #58A7F2', 'font-size: 24px;background: #F4605F;color: #fff;padding: 5px', 'border: 1px solid #8F4CFF;padding: 10px;border-radius: 50%'
)
除了%c
,还有其他几个占位符:%i
、%f
、%s
等,因为不太常用,所以就不具体介绍了。
场景2:在控制台画条龙吧
看来最近很流行画龙啊,行,满足你:
console.log('%c', 'background-image: url(/龙.jpg); background-size: 100%; padding:267px 300px;')
ps.在chrome
不知道为啥没有效果,以上是在edge
浏览器上的效果。(用图片就属于耍赖皮了啊,而且图片的支持性很差,估计很多浏览器都显示不出来,能不能换种方式?)要求还挺多,不能用图片,那就和上述天猫的那只猫一样给你用字符画吧,不过这样我们需要先把图片转成字符,原理和大帅的那篇文章一样,只不过是把div
换成字符。使用canvas
获取到图片的像素数据后,使用两层循环嵌套,外层遍历高,内层遍历宽,迭代高的时候添加一个换行符\n
,迭代宽的时候,根据当前像素点的r
、g
、b
信息判断是添加空字符还是非空字符,最后拼接完成的字符就是我们要打印的字符,不过需要注意的是因为我们是一个像素点对应一个字符,但是字符的实际大小肯定是比一个像素大的,比如一个16px
的文字,那么最终我们得到的字符图形将是原图片的16倍,这显然太大了,控制台显示不下,所以需要缩小,怎么缩小呢,有两个方法,一个是缩小图片,图片小了,像素点自然就少了,二是减少取样点,比如每隔10px
我们取一个点,这样的问题是最终图形可能会和原图片有点偏差。
// 加载龙的图片
let img = new Image()
img.src = './龙.jpg'
img.onload = () => {draw()
}
// 把图片绘制到canvas里
const draw = () => {const canvas = document.getElementById('canvas')canvas.width = img.widthcanvas.height = img.heightconst ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, img.width, img.height)// 获取像素数据const imgData = ctx.getImageData(0, 0, img.width, img.height).data// 拼接字符join(imgData)
}
// 把像素数据拼接成字符
const join = (data) => {let gap = 10let str = ''for (let h = 0; h < img.height; h += gap) {str += '\n'for (let w = 0; w < img.width; w += gap) {str += ' '// 因为字符的高度普遍都比其宽度大,所以额外添加一个空字符平衡一下,否则最终的图形会感觉被拉高了let pos = (h * img.width + w) * 4let r = data[pos]let g = data[pos + 1]let b = data[pos + 2]// rgb转换成yuv格式,根据y(亮度)来判断显示什么字符let y = r * 0.299 + g * 0.578 + b * 0.114if (y >= 190) {// 浅色str += ' '} else {// 深色str += '#'}}}console.log(str)
}
效果如下:可以看到虽然大致形状出来了,但是细节少了很多,另外一种缩小图片的方式有兴趣可以自行尝试,效果可能会比这种好一点。不过也不用这么麻烦,有很多网站就可以直接帮你转,比如:www.degraeve.com/img2txt.php。
相爱
场景1:怎么更方便的打印对象
对象,我们都知道它是引用类型,平时开发中,我们经常会打印某个对象或数组,如果没有修改它的话当然没有什么问题,但是如果中途对它有多次修改,又想看每次修改后的这一时刻的数据,很遗憾,直接使用console.log
或dir
之类的方法最终显示的都是该对象最后时刻的数据:
let obj = {a: 1, b: [1, 2, 3]}
console.log(obj)
obj.a = 2
console.error(obj)
obj.b.push(4)
console.dir(obj)
可以看到旁边都有个叹号,移上去会显示一行提示:This value was evaluated upon first expanding,It may have changed since then.
,意思就是这个值计算了一次,但是后面可能是会变化的,所以我们往往会使用:console.log(JSON.stringify(obj))
或者深拷贝一下再打印,有没有更简单的方法呢?我们可以给console
加两个方法,一个叫console.obj
,先深拷贝一下再打印,另一个叫console.str
,把对象序列化后再打印:
console.obj = function (...args) {let newArgs = args.map((item) => {if (Object.prototype.toString.call(item) === '[object Object]' || Array.isArray(item)) {return deepClone(item)} else {return item}})console.log(...newArgs)
}console.str = function (...args) {let newArgs = args.map((item) => {try {let obj = JSON.stringify(item)return obj} catch(e) {return item}})console.log(...newArgs)
}
场景2:怎么在生产环境去掉console
想去掉生产环境的console
可以通过webpack
的插件来做,也可以拦截一下console
对象的方法,判断是否是生产环境,是的话就不打印日志了,让我们来重写一下console
对象:
let oldConsole = window.console
let newConsole = Object.create(null)
// 其他方法这里暂时省略了
;['log'].forEach((method) => {newConsole[method] = function (...args) {// 非开发环境直接返回if (process.env.NODE_ENV !== 'development') {return}oldConsole[method](...args)}
})
window.console = newConsole
重写console
可以用在任何需要知道console
调用的场景下,比如前端监控日志上报。
相守
nodejs
中的console
和浏览器的是有点差异的,这个显而易见,毕竟命令行肯定没有浏览器这么强大:如图所示,log
、info
、error
、warn
、debug
这几个方法表面上看起来没有什么区别,error
和warn
不像在浏览器上一样有堆栈信息,trace
还是保持着一致,对于对象的打印也是直接展开的,所以想要格式化的显示需要自行对要打印的对象进行处理,比如对于纯对象:
console.log(JSON.stringify({a: 1, b: [1, 2, 3]}, null, 4))
另外%c
的占位符显然也是没有效果的,如果想要打印出带颜色的可以使用chalk之类的工具库,其他一些方法的输出效果如果命令行不支持的话最终都会直接调用console.log
来处理。浏览器环境里没有Console
类,但是nodejs
里是存在的,有两种方式获取到:
const { Console } = require('console')
const { Console } = console
通过Console
类可以根据你的需求传入参数来实例化一个新的console
实例:
/*
stdout:可写流,用来输出信息
stderr:可选的可写流,用来输出错误信息,不传则使用stdout
ignoreErrors:在写入底层流时忽略错误
*/
new Console(stdout[, stderr][, ignoreErrors])
默认的全局console
是输出到标准输出流和标准错误流,相当于:
new Console(process.stdout, process.stderr)
那么你完全可以选择把日志输出到指定的文件里:
const output = fs.createWriteStream('./stdout.log')
const errorOutput = fs.createWriteStream('./stderr.log')
new Console(output, errorOutput)
再见
纵是不舍,终有离别,各位看到这里的有缘人我们下次再见吧~
关于本文
作者:街角小林
https://juejin.cn/post/6971018380581011464
推荐阅读
Chrome 上开发调试的九个技巧
最后
关注下方「前端开发博客」,回复 “简历模板”
领取33个精选前端简历模板
如果觉得这篇文章还不错,来个【分享、点赞、在看】三连吧,让更多的人也看到~
用 console 画条龙?相关推荐
- 跟着我左手学好前端,右手画条龙~
点击上方"程序员黑叔",选择"置顶或者星标" 期待你的关注! 人的运动--走,跑,跳,是由骨骼带动躯干和四肢完成的.「骨骼动画」,顾名思义,就是模拟骨骼运动的机 ...
- 缇娜机器人_《无主之地2:小缇娜的龙堡之袭》四条龙boss打法攻略
无主之地2是一款相对比较完美的射击类游戏,在这款游戏里面,玩家可以体验到与传统射击游戏不一样的体验,高自由度的设置,让这款游戏的生命力大大增强. 四条龙boss打法攻略 boss是四只飞龙,分别是火属 ...
- php台阶走两步余一步,【原创BG】嗨,那条龙 CP:阿莱克丝X大王
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 第三颗白宝石 第三纪元两千七百七十年,矮人之国伊鲁柏易主,黄金巨龙史矛革成为了孤山的新主人.中土大陆的居民都以为这只贪婪的恶龙会恬不知耻地将魔爪伸向幽暗密 ...
- python画条状图_Python 绘制分组条形图
借助 pandas 绘制分组条形图 1. 示例 1 使用默认颜色 代码 importmatplotlib.pyplot as plt importnumpy as np importpandas as ...
- 异形布局 canvas画龙
异形布局 canvas画龙 参考文章:产品经理:你能不能用div给我画条龙? <!DOCTYPE html> <html><head><meta charse ...
- 趣谈GC技术,解密垃圾回收的玄学理论(一)
点击上方蓝字,关注我们~ 导语:大多数程序员在日常开发中常常会碰到GC的问题:OOM异常.GC停顿等,这些异常直接导致糟糕的用户体验,如果不能得到及时处理,还会严重影响应用程序的性能.本系列从GC的基 ...
- ChatGPT账号没封的看过来,与ChatGPT玩个超级创意游戏
文 / 高扬(微信公众号:量子论) 这几天ChatGPT账号批量封禁之事让大家人心惶惶,今天为大家散散心,用ChatGPT玩些花样. ChatGPT在绘画上没天赋,但我很想让它画画,怎么办? 我想到了 ...
- 2020 CES“高尖精”机器人回顾!
来源 | 机器人在线 原创 | 养乐多 2020 CES(国际消费类电子产品展览会)于美国时间1月7日到1月9日在美国拉斯维加斯会展中心盛大举行,2020年全新科技行业的趋势在这里开启. 拉斯维加斯会 ...
- 十二时辰篇:这该死的 996
亥时 Christina:你好! 今晚,我又接收"福报"了.你知道的,我在一线互联网公司上班,它叫"码哥跳动". 现在已是亥时,push 完代码后拿出我在「拼夕 ...
最新文章
- JAVA中获取当前系统时间
- SQLite 函数大全
- 开放原子超级链动态内核上线,十分钟可搭建一条区块链
- 编程体系结构(07):JavaEE之Web开发
- 计算机毕业设计中Java编程案例之学生管理系统
- AndroidDeveloper Weekly No.5
- MySql学习笔记【二、库相关操作】
- 计算机如何通过手机连接网络打印机,手机连接电脑打印机怎么设置
- C语言利用回调函数实现qsort函数
- wps页眉添加下划线
- nova4e可以升级鸿蒙吗,年轻人的自拍神器 华为nova4e颠覆你的感官
- PS 反选 剪切
- 分辨率自动调节html,网页根据分辨率自适应
- c语言学生成绩设计思路,C语言学生成绩管理系统设计.docx
- unwinding now org.apache.cxf.interceptor.Fault: Marshalling Error: null
- 原型和原型链和instanceof
- Python 中的取余与取整操作
- 深入理解矩阵的特征值和特征向量
- ASP.NET微信公众号开发实记之一 接入配置
- PHP针对数字的加密解密类,可直接使用