js调试技巧参考

1. console.log(obj);

在使用 console.log打印一个引用类型(比如数组和自定义对象)的对象的时候,输出结果可能并不是执行 console.log方法那个时间点的值。举个例子:


image.png

可以发现两个 console.log输出的结果展开后都是 [1, 2, 3, 4],因为数组是引用类型,所以在展开后获取到的都是数组最新的状态。我们可以使用 JSON.parse(JSON.stringify(...))来解决这个问题:


image.png
2.console.dir

场景:我们有时候想看看一个DOM对象里面到底有什么属性和方法

3.console.table

场景:获取到一个用户列表,每个用户有很多属性,但是我们只想查看其中的某些属性,在用 console.log打印出来的时候需要把每个用户对象展开一个个查看,非常麻烦。而 console.table完美的解决这个问题,比如我只想获取到下列用户的id和坐标:

4.console.time

场景:有时候我们想知道一段代码的性能或者一个异步方法需要运行多久,这时候需要用到定时器,


image.png
5.使用 debugger打断点

使用 debugger关键词,我们可以直接在源码中定义断点,方便很多,比如:


image.png
6.查到源码文件

场景:有时候我们想在控制台的 Sources中查找某个js源文件,要把文件夹逐一点开找,非常麻烦。只要按 Command + P(windows的快捷键请自行查看)就能弹出搜索框搜索你想要找的文件啦:

7.压缩JS文件的阅读

场景:有时候我们需要在 Sources中阅读一段js代码,但是发现它被压缩了,Chrome也提供了和方便的格式化工具,让代码变得重新可读:


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容