前端调试碰见循环断点(debugger)，应该如何解决？

前言

作为前端开发来说，js调试是一项必备的技能。无论是要查找bug，还是想了解别人代码的逻辑，js调试都是一种可以帮助你节省时间的方法。

大家都知道chrome的调试工具功能十分强大，并且能够快速支持新特性，因此今天我们就拿chrome举例子。

断点的类型

在开始介绍之前，我们先了解下断点的类型，其实断点分为很多种类，今天我们主要介绍三种：

1. 简单断点 ：这种断点是调试时最常用的断点，设置好后只要程序执行到设置的位置，就会自动停止。
2. 条件断点 ：这种断点可以让你在满足特定条件的时候才停止程序，比如只有在某个变量的值等于某个值的时候才停止程序。
3. 日志断点 ：这种断点可以让你在程序执行到某个位置的时候输出一些信息到控制台，比如当前变量的值或者正在执行的函数名。

如何使用断点

在chrome中使用断点非常简单：

1. 打开Chrome DevTools，然后选择“Sources”面板。
2. 在要设置断点的那行代码上点击鼠标左键。
3. 就会出现一个红色的圆点，表示已设置断点。

当程序执行到该行代码时，就会自动停止，并且在该行代码上出现一个蓝色的箭头，表示当前正在执行的代码行。

循环断点

循环断点是专门用来调试循环的断点，当程序执行到循环的开始位置时，就会自动停止，并且在循环体的开始位置出现一个蓝色的箭头，表示当前正在执行的代码行。

循环断点非常适合调试循环，因为它可以让你看到循环的执行过程，并检查循环变量的值。

解决方法

当你在使用循环断点调试代码时，可能会遇到以下几种问题：

• 断点不起作用：这可能是因为断点设置得不正确，或者因为代码已经改变了。
• 断点在循环体内多次触发：这可能是因为循环体中有不止一个断点，或者因为循环体中使用了continue语句。
• 断点在循环体中不触发：这可能是因为循环体中使用了break语句。

1. 断点不起作用

如果你遇到断点不起作用的问题，你可以尝试以下几种方法：

• 检查断点是否设置正确。
• 确保代码没有改变。
• 尝试使用其他类型的断点，比如条件断点或日志断点。

2. 断点在循环体内多次触发

如果你遇到断点在循环体内多次触发的问题，你可以尝试以下几种方法：

• 检查循环体中是否有不止一个断点。
• 检查循环体中是否使用了continue语句。

3. 断点在循环体中不触发

如果你遇到断点在循环体中不触发的问题，你可以尝试以下几种方法：

• 检查循环体中是否有使用了break语句。
• 尝试使用其他类型的断点，比如条件断点或日志断点。

结语

循环断点是调试循环的利器，可以帮助你快速找到问题所在。通过上述介绍，希望你能够更好地掌握循环断点，以便更好地进行调试。