除了console.log()，很多人不知道的其他方法console.table，console.dir，console.time等

console.dir 可以对象化输出 dom

<script>
  setTimeout(() => {
         let d = document.querySelector('.box');
         console.log(d);
         console.dir(d);
     }, 500);
 </script>
1
2
3
4
5
6
7

输出结果

这个对象展开之后的内容太多了就不截图了

console.table能够以表格形式展现对象/数组

<script>
  let a = ['张三', '李四', '王五', '赵六', '田七']
     let b = {
         name: '张三',
         sex: '男',
         height: 180,
         age: 21
     }
     console.table(a)
     console.table(b)
 </script>
1
2
3
4
5
6
7
8
9
10
11

输出结果

console.clear()可以清空控制台

console.time()计时

console.time('a')
let a = 0
for(let i = 0; i < 1000; i++){
    a += i
}
console.timeEnd('a')
//a: 0.026123046875 ms
1
2
3
4
5
6
7

console.time('a')
let a = 0
for(let i = 0; i < 100000000; i++){
    a += i
}
console.timeEnd('a')
//a: 418.958740234375 ms
1
2
3
4
5
6
7

console.memory可以查看内存状况

需在浏览器中执行，且不需要加括号

最后一个console.trace，也是我认为实际开发中最有用的

能打印出方法的调用链

<script>
     const a = function () {
         b()
     }
     const b = function () {
         c()
     }
     const c = function () {
         console.trace()
     }
     a()
 </script>
1
2
3
4
5
6
7
8
9
10
11
12