相识

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.width
    canvas.height = img.height
    const 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 = 10
    let 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) * 4
            let 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.114
            if (y >= 190) {
                // 浅色
                str += ' '
            } else {
                // 深色
                str += '#'
            }
        }
    }
    console.log(str)
}

成果如下：

能够看到尽管大抵形态进去了，然而细节少了很多，另外一种放大图片的形式有趣味能够自行尝试，成果可能会比这种好一点。不过也不必这么麻烦，有很多网站就能够间接帮你转，比方：https://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)

再见

纵是不舍，终有离别，各位看到这里的有缘人咱们下次再见吧~