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.log，console.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