作为前端，这几个关于console的小知识点，你知道吗

公众号 程序员黑豆 分享前端资料、面试题、AI知识，欢迎关注哈。

在我们实际开发中呢，经常会遇到把一个变量打印到控制台，看一下它的结果的情况，就比如下面这个形式的对象：

const obj = {
  "err_no": 0,
  "err_msg": "success",
  "data": {
    "user_basic": {
      "university": {},
      "major": {}
    },
    "user_counter": {},
    "user_growth_info": {}
  }
}

我们一般会使用 console.log() 看一下它的值： console.log(obj)

我们点击这个按钮可以一层层的展开这个对象：

除了 console.log() 外，根据实际情况我们还可以使用下面几种。

console.dir

我们还可以使用 console.dir()。在使用它输出 JS 数据类型数据的时候它和使用 console.log() 的效果差不多：

我们展开这个对象，可以查看我们想看的数据：

当我们想打印出个某个 DOM 对象时就不一样了，使用 console.log() 输出的是这个 DOM 元素：

使用 console.dir() 输出的是这个 DOM 对象：

JSON.stringify()

我们还可以使用 console.log() 配合 JSON.stringify()：

console.log(JSON.stringify(obj, null, 4))

运行效果如下：

可以看到，这里以字符串的形式将这个对象输出在了控制台。

console.table

我们还可以使用 console.table()，它会以一种表格的形式来输出结果：

可以看到，这样看着还是很整齐的。

如果我们要打印的是一个数组的话，使用 console.table() 输出数据，看起来会更方便一些：

const arr = ['a', 'b', 'c']
console.table(arr)

还有，输出多个数据的使用使用 console.table() 也有利于查看数据，如：

const a = 'a', b = 'b', c = 'c'
console.table({a, b, c})

效果如下：

consle.time 和 console.timeEnd

还有，在我们开发的过程中，有时候需要去看一段代码执行到底消耗了多少时间，我们可以使用 console.time() 和 consle.timeEnd() 包裹想要测试运行时间的代码，比如下面这段代码：

function test() {
  for (let i = 0; i < 10000; i++) { }
}

console.time()
test()
console.timeEnd()

运行代码，可以看到控制台输出了这段代码在本机大概的一个运行时间：

感谢阅读

1. 公众号 程序员黑豆 分享前端资料、面试题、AI知识，欢迎关注哈。
2. 如果本文对您有帮助，欢迎点赞\评论\收藏哈，您的「点赞\评论\收藏」是我创作的加油站，感恩🤗。