前言
平常我们在前端开发调试的过程中，用的最常用的一种手段就是通过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取消相应的选项就行，或者右键全部移除。
