阅读 34

console完全指北

一直以来,作为前端工程师,调试bug的时候,用的最多的就是console.log,我是中枪了,哈哈。其实,console还有很多不为人知的功能和一些新奇的玩法。比如下图是知乎的控制台打印内容:

逼格一下子就上来了,有没有?

开始之前,看清对象

不要误会,这里的对象不是你的女朋友哦,在开始学习console之前,我们打印下console本身,看看它到底长什么样

console.log(console)
复制代码

大概长这样,一个庞然大物,不要担心,接下来,我们来解剖下对象

第一个命令:清空

我们习惯了在调试之前清空下控制台,保持整洁。常见的做法就是点击控制台提供的清空按钮。在这:

同时,我们可以调用console对象的clear方法达到同样的效果:

console.clear()
复制代码

执行后提示console was cleared,就代表清空啦

高频指令

有几个使用频率非常高的指令:

console.log()
consle.warn()
console.error()
复制代码

console.log

conosle.log是我们最常用的指令,没有之一,我以前一直以为控制台只有这么一个功能,哈哈。

单参数
// 1.字符串
console.log('在别的游戏里,像我这么帅的一般都是主角哦!')
// 2.数字
console.log(100)
// 3.对象
console.log({object: '对象'})
// 4.数组
console.log(['array', '数组'])
复制代码

多参数

console.log()可以接受多个参数:

console.log('Noxians… I hate those guys', '在别的游戏里,像我这么帅的一般都是主角哦!')
console.log(100, 200)
console.log({object: '对象1'}, {object: '对象2'})
console.log(['array', '数组1'], ['array', '数组2'])
复制代码

替换模式

console.log支持字符串替换模式:

console.log('%s很生气,后果很严重!', '俺')
console.log('是的,只要%i,就能让你爽到不能呼吸', 998)
console.log('这是你的对象: %o', {object: '对象'})
复制代码

样式

可以为打印出来的文字应用css样式,这个功能着实厉害,玩得好可以大秀逼格,先看个简单的例子:

console.log('%c我还以为你从来都不会选我呢', 'color: red; font-size: 30px')
复制代码

还可以配置多处的样式:

console.log('你们知道最强的%c武器%c是什么?没错,就是%c补丁', 'color: blue;', '', 'color: yellow;font-size: 30px')
复制代码

是不是很香!但是这也有个小问题,样式越写越多,阅读起来很麻烦,接下来看下更高级的用法:

console.log('%c大部分人都会打飞机,这对飞机来说很不公平!', `
  background: white;
  border: 3px solid red;
  border-radius: 10px;
  color: red;
  font-size: 50px;
  margin: 40px;
  padding: 20px;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.05);
`);
复制代码

这个高级用法惊艳到你了吗?发挥你的想象力,可以打印出各种骚东西的!

这种行内样式写起来可能有点冗长,我们还可以使用变量来维护样式:

const clearStyles = '';
const largeText = 'font-size: 20px;';
const yellowText = 'color: yellow;';
const largeRedText = 'font-size: 20px; color: red;';
const largeGreenText = 'font-size: 20px; color: green;';

console.log(`%c说教无益,%c折断的 %c骨头%c才是更好的%c课本`,
  largeRedText,
  clearStyles,
  largeGreenText,
  clearStyles,
  largeText + yellowText
);
复制代码

console.warn

console.warn的警告等级比log高点,有些插件库里会这么用:

console.warn('componentWillReceiveProps已经过时了,请及时迁移,我们将在下个版本移除')
复制代码

console.error

console.error级别最高,已经阻塞代码了,样式上也更加显眼:

console.error('Uncaught ReferenceError: girlFriend is not defined')
复制代码

断言 assert

console.assertconsole.error有点接近,但是assert由判断条件来决定是否打印:

let age = 17
console.assert(age > 18, '未成年禁止观看')
复制代码

技术 count

有时候想知道某个函数在某段时间内被调用了多少次,这时候可以使用console.count,很简单的语法:

console.count()
// default: 1
console.count()
// default: 2
console.count()
// default: 3
复制代码

也可以传入一个参数作为label,替换掉默认的default:

console.count('函数一被调用了')
// 函数一被调用了: 1
console.count('函数一被调用了')
// 函数一被调用了: 2
console.count('函数一被调用了')
// 函数一被调用了: 3
复制代码

另外console.countReset()可以重置计数,用的频率就更少了,可以忽略

成组 group groupEnd

// 一般使用
console.group()
console.log('欢迎来到')
console.log('德莱联盟')
console.groupEnd()
// 带标题
console.group('德莱文')
console.log('欢迎来到')
console.log('德莱联盟')
console.groupEnd()
// 标题带样式
console.group('%c德莱文', 'font-size: 20px;color: blue;')
console.log('欢迎来到')
console.log('德莱联盟')
console.groupEnd()
复制代码

表格模式 table

console.table会将打印的数组或者对象以表格的形式展示:

let name = ['英', '雄', '联', '盟']
console.table(name)

let heroInfo = {
    name: '小炮',
    age: 13,
    say: '我好想射点儿什么!'
}
console.table(heroInfo)
复制代码

打印出来的数据看起来还是很舒服的,数组的index是0,1,2...,对象的index是自己的keys。 那么打印对象数组是什么展示方式呢:

let heroList = [
    {
        name: '小炮',
        age: 13,
        say: '我好想射点儿什么!'
    },
    {
        name: '金克丝',
        age: 14,
        say: '我是个疯子,有医生开的证明'
    },
    {
        name: '卢锡安',
        age: 15,
        say: '人终有一死 而有些人则需要一点小小的帮助'
    }
]
console.table(heroList)
复制代码

那么打印嵌套的对象数组是什么样子呢:

let heroList = [
    {
        name: '小炮',
        age: 13,
        say: '我好想射点儿什么!',
        friend: {
            name: '锤石',
            age: 10
        }
    },
    {
        name: '金克丝',
        age: 14,
        say: '我是个疯子,有医生开的证明',
        friend: {
            name: '光辉',
            age: 11
        }
    },
    {
        name: '卢锡安',
        age: 15,
        say: '人终有一死 而有些人则需要一点小小的帮助',
        friend: {
            name: '琴女',
            age: 12
        }
    }
]
console.table(heroList)
复制代码

可以看到,friend字段折叠了,我使用的是Chrome浏览器,friend不能展开

计时 time timeLog timeEnd

通过计时器可以知道自己的代码运行多久的时间:

console.time('计时');
for(let i = 0; i < 10; i++) {
    // 其他代码
    console.timeLog('计时');
}
console.timeEnd('计时');
复制代码

不同电脑配置,不同运行环境,打印出来的时间会稍有差别,这很正常

其他控制台小技巧

调试 debugger

有时候懒得打断点,可以试试debugger

function doSomething() {
    debugger
    console.log('英雄联盟不错')
}
// 调用
doSomething()
复制代码

快速选中元素 $0, $1, $2, $3, $4

怎么才能最快速地选中元素,其实也很简单,在浏览器的Elements面板中,鼠标最近点击的DOM元素就是$0,依次类推,还有$1, $2, $3, $4,以百度为例:

另一种选中元素利器 $

相信大家都使用过Jquery,在Jquery中使用$来选择元素,浏览器也实现了$选择器。还是以百度为例:

总结 最让我回味的功能是使用%c来写css样式,真是太惊艳了。好些网站都有自己的首页console,就像知乎那样。

参考

css-tricks

MDN console 文档