Chrome操作指南——入门篇（八）breakpoint

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十一天，点击查看活动详情

前言

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