console的基础使用

console一定是各位前端最熟悉的小伙伴了有些网站还会在控制台输出一些有意思的东西，比如招聘信息，像百度的：

也有一些网站可能不喜欢被人调试，只要打开控制台就自动进入调试模式，还是无限debugger的那种，最简单的实现方式如下：

setInterval(() =>{debugger
}, 1000)

console对象是由宿主环境提供的，如浏览器和nodejs，作为全局对象的一个属性，不需要通过构造函数创建，直接使用即可，console对象的__proto__指向的是一个空对象，所以 console对象的方法都挂在对象自身，在 chrome控制台打印console可以看有如下方法或属性：

console输出信息的方法都可以接收多个以逗号分隔的参数，打印的时候会在同一行进行显示，不会换行，想要换行的话请使用console方法打印多次。

1.输出普通的调试信息

可以使用console.log或console.info，这两个方法基本是一样的

2.想输出不同等级的调试信息

调试级别的信息可以使用console.debug方法警告信息可以使用console.warn方法错误信息可以使用console.error方法

3.想查看某个DOM元素的所有属性

使用console.dir方法

4.想查看具体的调用位置、调用堆栈等信息

只需要找到调用位置的话，log、info、error等方法都可以，如果还想查看调用堆栈信息的话可以使用console.assert、console.error、console.warn以及专门的方法console.trace，trace方法可以不带参数

5.打印太多的时候可以分组

可以使用console.group方法来进行分组显示，使用console.groupEnd方法结束分组，可以多级嵌套

console.group('xxx')
xxx
console.groupEnd()

6. 类似百度效果

// console要输出换行的字符需要使用\n：
console.log('每一个星球都有一个驱动核心，\n每一种思想都有影响力的种子。\n感受世界的温度，\n年轻的你也能成为改变世界的动力，\n百度珍惜你所有的潜力。\n你的潜力，是改变世界的动力！')
// 输出红色的字可以使用占位符，占位符格式为：console.log('%x其他字符', 'xxx', [xxx, xxx...])
// 设置样式使用%c占位符，可以使用多个，为占位符后面的字符应用样式，替换完占位符还剩下的参数也会正常打印出来
// 除了%c，还有其他几个占位符：%i、%f、%s
console.log('%c百度2021校园招聘简历投递：', 'color:red', 'https://talent.baidu.com/external/baidu/campus.html')

7. 放图片

// 图片的支持性很差，估计很多浏览器都显示不出来
console.log('%c', 'background-image: url(/**.jpg); background-size: 100%; padding:267px 300px;')

8. 更方便的打印对象

我们可以给console加两个方法，一个叫console.obj，先深拷贝一下再打印，另一个叫console.str，把对象序列化后再打印

9. 怎么在生产环境去掉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