前言
平常我们在前端开发调试的过程中,用的最常用的一种手段就是通过console.log(...)
来打印日志,根据日志来分析问题。其实还有一种手段就是breakpoint
,它可以在你想要的观察地方,阻塞你的代码,观察当前的运行情况,在开发调试中不失为一种好的办法,尤其是在生产环境下,很是好用。
breakpoint
比如有如下一段代码:
Array.from(Array(10)) .map(Math.random) .forEach((item) => { let num = item * 10 }); 复制代码
你想在每次循环的时候让代码停下来,观察它的状态:
你就可以在相应的地方鼠标左键单击一下,添加断点,这样每次循环的时候就会停下来。
edit brakpoint
当然,他可能循环的次数很多,可能几十次,上百次,你不想每次都停下来观察它,你就可以 右键 -> edit breakpoint,输入表达式来添加条件断点,会在结果为真值的时候停下来。
可以看到我们添加的一个当num大于5时的断点,他在每次num大于5的时候,都停了下来。
breakpoint和console.log(...)
既然我们可以在条件断点中添加表达式,那同样的是不是我们也可以添加console.log(...),
我们分别在第四行和第五行,添加了两个添加断点。
在console中我们可以看到,它如我们预想中的打印了出来。
既然可以添加console.log(),那我们何不直接在source
面板里面直接添加呢。完全避免了项目中一堆log信息的问题。而且当你不想要的时候,在breakpoint取消相应的选项就行,或者右键全部移除。