调试只会console.log?来看一看这六种惊艳的调试技巧!

开发 前端
在日常开发中,大多数同学都会通过 console.log​ 的方式来进行代码调试。但是 console.log​ 是具备很多局限性的,比如:我们想要获取某段代码的执行耗时,通过 console.log 就无法满足需求。

Hello,大家好,我是 Sunday。

在日常开发中,大多数同学都会通过 console.log 的方式来进行代码调试。但是 console.log 是具备很多局限性的,比如:我们想要获取某段代码的执行耗时,通过 console.log 就无法满足需求。

那么怎么办呢?其实对于 console 对象来说,除了 log 方法它还提供了很多其他的方法帮助我们进行调试,利用这些方法可以极大地提升我们的工作效率~~

01:console.table

使用 console.table 可视化复杂的对象和数组:

const myData = [
  { name: "程序员Sunday", age: 30 },
  { name: "Sunday", age: 25 }
];
console.table(myData);

打印结果如下:

图片图片

02:console.trace

使用 console.trace 可以明确函数的调用逻辑关系:

function fn() {
  function test() {
    console.trace("这是一个利用trace的测试打印"); 
  }
  test();
}
fn();

打印结果如下:

图片图片

03:console.time && console.timeEnd

使用 console.time && console.timeEnd 来记录代码的执行耗时:

console.time('js 耗时')
const vNodes = []
for (let i = 0; i < 10000; i++) {
  const vNode = {
    type: 'div'
  }
  vNodes.push(vNode)
}
console.timeEnd('js 耗时')

打印结果如下:

图片图片

04:console.assert

使用 console.assert 断言你的判断逻辑。

如果断言为假,它抛出一个你指定的错误:

const myArray = []
console.assert(myArray.length > 0, "myArray 是空的!");

打印结果如下:

图片图片

05:console.clear

在很多时候,我们的控制台可能会打印非常多的内容。所以,可以让代码在执行到某一个特定的时机时,利用 console.clear() 清空控制台

console.clear()

执行之后会打印这个:

图片图片

06:console.error

使用 console.error 直接打印一个错误级别的描述:

console.error('错误信息')

打印结果如下:

图片 图片

责任编辑:武晓燕 来源: 程序员Sunday
相关推荐

2018-01-26 10:42:44

前端JavascriptConsole对象

2023-02-24 08:00:00

2021-03-17 08:53:21

JavaScript开发代码

2018-03-08 11:10:33

分布式存储Ceph

2010-01-27 13:54:52

IT电影

2020-03-25 08:26:44

console.log前端

2022-07-06 15:51:48

浏览器开发者工具

2020-05-20 19:38:11

前端js调试工具

2023-08-31 09:10:18

JavaScript调试

2020-01-09 08:26:16

代码JS开发

2019-05-06 15:27:48

Oracle数据库数据

2011-02-22 16:09:53

Eclipse调试

2024-04-15 00:00:00

console语法树AST

2021-09-07 07:53:43

Console函数DOM

2013-03-29 13:17:53

XCode调试技巧iOS开发

2012-05-21 10:13:05

XCode调试技巧

2010-06-13 11:28:39

UML序列图

2024-03-07 08:22:32

CSS变量代码

2021-05-28 11:30:39

物联网互联网IoT

2024-03-18 07:56:49

CSSJS代码调试
点赞
收藏

51CTO技术栈公众号