打断点和console.log是我们前端调试中, 使用最为频繁的一种. 但实际上console API 可不仅仅用来查看某个值或者某个变量是否存在, 它还有更多的用法是不为人知的.
概述
console 对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的. 其次它是一个全局对象, 我们先在控制台将console打印出来, 看看它里面都有些什么东西, 再来一一讲解吧.
Method
log
console.log就是向web控制台输出一条信息. 参数可以是变量, 数字, 字符串等.
// 常规下
var name = 'Jack'
console.log('Hello') // Hello
console.log(name) // Jack
console.log(`Hello, ${name}`) // Hello, Jack除此之外, 还支持格式化输出.
var name = 'Jack'
console.log('Hi, %s. what are you doing', name) // Hi, Jack. what are you doing
console.log('%c I am some great text', 'font-size: 50px;') // 假装 50px: Hi, Jack. what are you doing
下面是它所支持的参数, 学习C语言的同学有没有感觉扑面而来的熟悉感呀~
| 占位符 | 描述 |
|---|---|
| %s | 字符串 |
| %d or %i | 整数 |
| %s | 打印字符串 |
| %f | 浮点数 |
| %c | 样式代码 |
这里连知乎, 百度等大厂也用console来做招聘广告或做些有意思的事~
Bilibili 主页
知乎
info, warn, error
这三者实际上在我们开发时也时常出现. 现在主流的一些框架, 比如说Eslint, 就封装了相关方法. 当你语法出现不规范的地方, 就会根据错误来弹出指定的提示框来提示你.
// Info
console.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 info
console.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 empty
var str = '';
console.assert(str, 'Here is the "str" can not be empty')
// Assertion failed: 0 is not allowed!
var num = 0
console.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!')
总结
在适当的地方使用恰当的方法能使调试变得更清晰. 发现身边很多小伙伴都只了解log的方法, 正好最近看到了这方面的知识, 总结了一下, 活用于开发中能使效率变得更好~
参考资料:
MDN - Console: developer.mozilla.org/zh-CN/docs/…
从console.log说起（上）: www.alloyteam.com/2013/11/con…
javascript30:
courses.wesbos.com/account/acc…
