你可能不知道的console

打断点和console.log是我们前端调试中, 使用最为频繁的一种. 但实际上console API 可不仅仅用来查看某个值或者某个变量是否存在, 它还有更多的用法是不为人知的.

概述

console 对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的. 其次它是一个全局对象, 我们先在控制台将console打印出来, 看看它里面都有些什么东西, 再来一一讲解吧.

Method

log

console.log就是向web控制台输出一条信息. 参数可以是变量, 数字, 字符串等.

// 常规下var name = 'Jack'console.log('Hello') // Helloconsole.log(name) // Jackconsole.log(`Hello, ${name}`) // Hello, Jack

除此之外, 还支持格式化输出.

var name = 'Jack'console.log('Hi, %s. what are you doing', name) // Hi, Jack. what are you doingconsole.log('%c I am some great text', 'font-size: 50px;') // 假装 50px: Hi, Jack. what are you doing

下面是它所支持的参数, 学习C语言的同学有没有感觉扑面而来的熟悉感呀~

这里连知乎, 百度等大厂也用console来做招聘广告或做些有意思的事~

Bilibili 主页

知乎

info, warn, error

这三者实际上在我们开发时也时常出现. 现在主流的一些框架, 比如说Eslint, 就封装了相关方法. 当你语法出现不规范的地方, 就会根据错误来弹出指定的提示框来提示你.

// Infoconsole.info('Hi, This is message')// warning 警告console.warn('On, Your operation may cause a security breach!')// Error 报错console.error('Shit! Variable does not exist!')

实际效果:

table

console.table只接受一个数组或者对象, 可以接受一个额外的参数来描述表格的列数.

它会把数据通过表格的形式打印出来, 这样我们看数据的时候就能直观了很多:

var array = [
 { name: 'Jack', age: 12 },
 { name: 'Tome', age: 18 },
 { name: 'baka', age: 15 }
]
console.table(array)

group

console.group和console.groupWEnd就像一对标签一样. group在控制台创建一个新的分组, 输出到控制台上的内容都会被添加一个缩进, 表示该内容属于当前分组, 直到调用console.groupEnd()之后, 当前分组才结束.

var boys = [
 { name: 'Jack', age: 12 },
 { name: 'Tome', age: 18 },
 { name: 'baka', age: 15 }
]
boys.forEach(item => { console.group(`${item.name}`) console.log(`This is ${item.name}`); console.log(`${item.name} is ${item.age} years old`); console.log(`${item.name} is ${item.age * 7} years old`); console.groupEnd(`${item.name}`)
})

dir

console.dir —— 在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表

我们知道console.log可以实际上也可以输出DOM节点, 但如果我们想要知道DOM的属性的话, 这里就可以使用dir来输出.

var head = document.getElementById('head')console.log(head)console.dir(head)

值得注意的是. MDN提醒我们, 这个特性是非标准, 尽量不要在生产模式下使用.

count

count, 如同字面意思一样. count()会输出每一次被调用的次数. 该方法的兼容性也需要注意, 不适用于生产模式.

console.count('Steve')console.count('Steve')console.count('zeo')console.count('Steve')console.count('zeo')console.count('Steve')console.count('zeo')console.count('Steve')

clear

clear, 顾名思义就是清除. 看到别人那乱七八糟的用于调试的log或者info时, 这时只想要保留自己的调试信息. 那么console.clear()就可以为你解决这个烦恼, “一键清空”前面控制台所有的信息, 从头再来(雾)

// something infoconsole.clear()

time

启动一个计时器（timer）来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字。 页面中最多能同时运行10,000个计时器。跟group一样, time也是配套的。 当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间.

比如我们起一个fetch:

console.time('fetching data')fetch('https://api.github.com/users/anran758')
 .then(data => data.json())
 .then(data => { console.timeEnd('fetching data') console.log(data)
 })

oh, 这样我们就轻易的知道了这次我们请求花费了多少时间啦~

assert

console.assert()还是蛮有意思的. 它第一个参数接受一个断言(声明), 第二个参数是一个message. 如果断言为false，则将一个错误消息写入控制台。如果断言是true，就当做没发生。语法如下:

console.assert(assertion, message [, subst1, ..., substN]);

这里的断言不一定是false才会触发错误. 我特意去测试了一下, 触发的规则也跟if的判断里的逻辑相反. 只要是断言是0, NaN, undefined, false, null, 空字符串''就会激活报错.

// Assertion failed: Here is the "name" can not be emptyvar str = '';
console.assert(str, 'Here is the "str" can not be empty')// Assertion failed: 0 is not allowed!var num = 0console.assert(0, '0 is not allowed!')// Assertion failed: That is wrong!console.assert(1 === 2, 'That is wrong!')// 什么都不会发生console.assert(1 === 1, 'That is wrong!')

原文地址:https://juejin.im/entry/5a706a3451882573497934c5