2022 年了,你还只会 console.log 吗?
你应该学会的 5 个 JavaScript 控制台对象方法和技巧。

如果你是一名前端工程师,那么你一定用过 console.log,它可以在控制台打印辅助信息,排除问题。

但是你知道 console 对象的其他技巧吗?

本文会教大家 5 个 console 对象的实用技巧,希望能对大家有所帮助。


1. console.log()

1.1 基本使用技能

console.log() 是一个常用的开发方法,我们可以把它用在 JavaScript 的任何地方。

const name = 'fatfish'
const age = 24

console.log(name, age)

但是,如果打印的信息数量过多,信息就不直观了,因为我们无法确认信息分别代表什么。

const name = 'fatfish'
const age = 24
const job = 'Front end development engineer'
const hobbies = 'read, write article'

console.log(name, age, job, hobbies)

有什么能让信息更直观的方法吗?

有!只需一个对象。

const name = 'fatfish'
const age = 24
const job = 'Front end development engineer'
const hobbies = 'read, write article'

console.log({ name, age, job, hobbies })


1.2 CSS 样式

比较有趣的一点是,console.log 也能自定义。

console.log('%cfatfish', 'color: red;')

2. console.warn()

如果控制台打印的信息很多,就很难找到我们想要的信息,这时候我们就需要使用 console.warn,它有一个独特的黄色标志。

for (let i = 0; i < 50; i++) {
  console.log(`i: ${i}`)
  
  if (i === 16) {
    console.log(`i--: ${i}`)
  }
}

for (let i = 0; i < 50; i++) {
  console.log(`i: ${i}`)
  
  if (i === 16) {
    console.warn(`i--: ${i}`)
  }
}


3. console.error()

我们在日常工作中免不了要发送 HTTP 请求来获取数据,如果请求中出现错误,我通常会通过 console.log 打印报错信息。

但相较于 console.logconsole.error 更好用。

ajax() 
  .then((res) => {
    fn(res)
  }).catch((err) => {
    console.error(err)
  })

console.error 不仅有独特的红色错误标记,还会把函数调用的堆栈关系打印出来。

const a = () => {
  console.error("error");
}
const b = () => {
  a()
}
const c = () => {
  b()
}

c()


4. console.time() 和 console.timeEnd()

大家一般怎么计算一段代码的执行时间?

let startTime = Date.now()
let count = 0

for (let i = 0; i < 1000000000; i++) {
  count++
}

console.log(Date.now() - startTime)

或许你是通过计算两个时间节点间的时间间隔来获得执行时间,但这里有一个更好的方法,你想不想尝试呢?

let count = 0

console.time()
for (let i = 0; i < 1000000000; i++) {
  count++
}
console.timeEnd()

这个方法太棒了!我非常喜欢这个方法,但如果你想要计算多段代码的执行时间,就需要做标记。

let count = 0

console.time('time1')

for (let i = 0; i < 1000000000; i++) {
  count++
}

console.timeEnd('time1')

console.time('time2')

for (let i = 0; i < 1000000000; i++) {
  count++
}

console.timeEnd('time2')


5. console.table()

我们经常用 console.log 打印信息,但有时它不够直观。

const foods = [
  {
    name: '🍔',
    price: 30.89,
    group: 1,
  },
  {
    name: '🍨',
    price: 20.71,
    group: 1,
  },
  {
    name: '🍿',
    price: 10.31,
    group: 2,
  },
  {
    name: '🍵',
    price: 5.98,
    group: 2,
  },
]

console.log(foods)

我们可以试一试 console.table

console.table 与表格非常相似,简单明晰。


写在最后

非常感谢大家的阅读。欢迎关注我,我会继续创作更多高质量的文章!



原文作者:fatfish
原文链接:https://javascript.plainenglish.io/its-2022-please-don-t-just-use-console-log-anymore-217638337c7d
推荐阅读
相关专栏
前端与跨平台
78 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。