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